/* Base custom CSS, ported verbatim from Veery Full App.html (the original inline \3c style> block). */
/* Find & Replace highlights */
mark.fr-match { background: rgba(250, 204, 21, 0.45); color: inherit; border-radius: 2px; padding: 0 1px; }
mark.fr-match.fr-current { background: #c1684f; color: #ffffff; border-radius: 2px; padding: 0 1px; }
html.dark mark.fr-match { background: rgba(250, 204, 21, 0.28); }
html.dark mark.fr-match.fr-current { background: #505050; }
html.theme-warm mark.fr-match { background: rgba(250, 204, 21, 0.25); }
button, a, [role="button"] { touch-action: manipulation; }
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block; line-height: 1;
  }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.ink-gradient { background: linear-gradient(45deg, #c1684f 0%, #d98a6f 100%); }
.nav-active { color: #2b2a27 !important; background-color: #faf7f2 !important; }
html.dark .nav-active { color: #e8e6e3 !important; background-color: #3a3c3b !important; }
html.dark .nav-active .material-symbols-outlined { color: #e8e6e3 !important; }
.topbar-color { color: #2b2a27; }
.chapter-active { background-color: #faf7f2; border-left: 2px solid #2b2a27; }
.panel-header { background-color: #ffffff; }
.outline-sidebar { background-color: #faf7f2; }
.export-preview-paper { background-color: #ffffff; }
.writing-canvas { line-height: 1.5; letter-spacing: -0.01em; }
/* Timeline tap highlight on mobile */
.tl-tapped { background: rgb(43 42 39 / 0.04); border-left: 2px solid rgb(43 42 39 / 0.4); padding-left: 4px; }
.tl-tapped .tl-actions { opacity: 1 !important; }
.tl-tapped .tl-spine-dot { width: 14px !important; height: 14px !important; --tw-ring-width: 4px; }
::-moz-selection { background-color: #f5e7e0; color: #2b2a27; }
::selection { background-color: #f5e7e0; color: #2b2a27; }
.ink-cursor { border-right: 2px solid #2b2a27; }
.custom-scrollbar::-webkit-scrollbar { width: 3px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
/* Paper — soft warm grey, barely-there */
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(196,198,204,0.45); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(196,198,204,0.75); }
/* Firefox */
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(196,198,204,0.45) transparent; }
.writing-canvas-shadow { box-shadow: 0 4px 32px rgba(12, 30, 46, 0.04); }
.chickadee-grain { background-color: #ffffff; }
.glass-panel { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); }
/* ── Z-INDEX STACK (ordered, no gaps) ──
      40  bottom nav
      50  topbar (sticky)
      60  drawer overlay scrim
      70  chapters drawer
     110  panel overlay scrim
     120  slide-in panels
     130  modals
     140  toast / focus-exit
    9990  user menu portal (fixed on body, beats all layers)
  */
.global-topbar    { z-index: 50; position: sticky; top: 0; }
.global-bottomnav { z-index: 40; }
.drawer-overlay   { z-index: 60; }
.chapters-drawer  { z-index: 70; }
.panel            { z-index: 120; }
.panel-overlay    { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,0); pointer-events: none; transition: background 0.3s ease; }
.panel-overlay.active { background: rgba(0,0,0,0.2); pointer-events: auto; }
.modal-overlay    { z-index: 130; }
.toast            { z-index: 140; }
.focus-exit       { z-index: 140; }
html { overscroll-behavior-y: none; }
body { min-height: 100dvh; height: 100%; background: #faf8f4; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: none; }
/* ── Mobile bounce scroll ──
     On mobile the body stops scrolling; the page content area becomes the
     scroll container. This keeps the topbar and bottom nav completely static
     during the native iOS rubber-band bounce — sticky/fixed elements on the
     body would otherwise drift with the overscroll.
  */
@media (max-width: 767px) {
    /* Size to the DYNAMIC viewport, not `height:100%` — on mobile `100%`/`vh` resolve to the
       LARGE viewport (URL bar hidden), so while the URL bar is showing the flex column would be
       taller than the visible area and, with overflow hidden, the topbar/bottom nav got pushed
       partly off-screen. `100dvh` tracks the currently-visible viewport, keeping both chrome
       bars pinned to the visible edges. */
    html { height: 100dvh; overflow: hidden; }
    body { height: 100dvh; overflow: hidden; min-height: unset; display: flex; flex-direction: column; }
    /* React mounts into #root — it must also be a flex column so its children
       (TopBar, scroll area, etc.) participate in the same flex axis. */
    #root {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .global-topbar { flex-shrink: 0; }
    #content-scroll-area {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain; /* bounce stays inside, doesn't propagate to body */
      background-color: #faf8f4;
    }
  }
.page { display: none; min-height: 100dvh; background-color: #ffffff; }
html.theme-warm .page { background-color: #281f19; }
html.theme-porcelain .page { background-color: #ffffff; }
/* Library page: match the warm tone of the workspace sidebar in each theme */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #page-projects { background-color: #faf8f4 !important; }
html.theme-porcelain #page-projects { background-color: #f5f6f8 !important; }
.page.active { display: block; }
/* Slide-in panels */
.panel { position: fixed; inset: 0; background: #ffffff; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform 0.3s ease; pointer-events: none; visibility: hidden; }
.panel.open { transform: translateX(0); pointer-events: auto; visibility: visible; }
/* On desktop, panels slide in from the right at a readable width */
@media (min-width: 768px) {
    .panel { left: auto; width: 520px; box-shadow: -8px 0 40px rgba(43,42,39,0.10); }
  }
/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(43,42,39,0.4); backdrop-filter: blur(4px); align-items: flex-end; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal-sheet { background: #ffffff; border-radius: 12px 12px 0 0; padding: 24px 20px 40px; width: 100%; max-width: 600px; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Toast */
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: #2b2a27; color: white; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; padding: 10px 20px; border-radius: 20px; opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; }
/* Drawer */
.chapters-drawer { position: fixed; left: -252px; top: 0; bottom: 0; width: 252px; background: #faf7f2; transition: left 0.3s ease; border-right: 1px solid rgba(196,198,204,0.2); display: flex; flex-direction: column; box-shadow: 4px 0 32px rgba(43,42,39,0.1); padding: 16px 12px 16px; }
body.no-drawer-transition,
  body.no-drawer-transition .chapters-drawer,
  body.no-drawer-transition .format-toolbar { transition: none !important; }
.chapters-drawer.open { left: 0; }
/* Pinned: on desktop the writing canvas shifts right */
@media (min-width: 768px) {
    .chapters-drawer.pinned { position: fixed; left: 0; box-shadow: none; border-right: 1px solid rgba(196,198,204,0.25); }
    /* Pin/unpin: animate the body padding so the writing canvas shifts smoothly.
       The no-drawer-transition class suppresses this on initial write-page load. */
    body.write-mode { transition: padding-left 0.3s ease; }
    /* Shift toolbar to centre over the writing canvas (viewport minus 252px drawer) */
    .write-mode.drawer-pinned .format-toolbar { left: calc(50% + 126px); transition: left 0.3s ease; }
    /* Hide app name and icon when chapters drawer is pinned open — desktop only */
    .write-mode.drawer-pinned #topbar-left { visibility: hidden; }
  }
.drawer-overlay { position: fixed; inset: 0; background: rgba(43,42,39,0.2); display: none; }
.drawer-overlay.active { display: block; }
/* Focus mode */
.focus-mode .global-topbar,
  .write-mode .global-bottomnav { display: none; }
.write-mode #page-write { padding-bottom: 0; }
.focus-mode .global-bottomnav,
  .focus-mode .format-toolbar,
  .focus-mode #write-side-rail,
  .focus-mode .word-count-bar { display: none !important; }
.focus-mode #page-write { padding-bottom: 0; }
.focus-exit { display: none; position: fixed; top: 16px; right: 16px; z-index: 140; background: rgba(43,42,39,0.7); color: white; border: none; cursor: pointer; padding: 8px 16px; border-radius: 20px; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; align-items: center; gap: 6px; }
.focus-mode .focus-exit { display: flex; }
/* Project drag-and-drop — grid of cover tiles (see useProjectDnD.ts's GRID ADAPTATION note).
     The handle now sits as a small corner icon over the cover art instead of a full-height
     left-edge strip, and the drop indicator is a ring around the whole target tile instead of
     a top border, since "insert before" doesn't read the same way in a multi-column grid as it
     did in a single-column list — a ring reads as "swap with this one", which is what actually
     happens. */
.proj-card { transition: opacity 0.15s, transform 0.15s; }
.proj-card.dragging { opacity: 0.35; }
.proj-card.drag-over-top { outline: 2px solid var(--md-sys-color-primary, #2b2a27); outline-offset: 2px; border-radius: 4px; }
.proj-card.drag-over-top * { pointer-events: none; }
.proj-drag-handle { cursor: grab; touch-action: none; position: absolute; left: 6px; top: 6px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.group:hover .proj-drag-handle, .proj-drag-handle:focus { opacity: 1; pointer-events: auto; }
/* Touch devices: handle is always visible (dimly) and touchable, same as before */
@media (hover: none) { .proj-drag-handle { pointer-events: auto; opacity: 0.55; } }
html.dark .proj-card.drag-over-top { outline-color: rgba(255,255,255,0.75); }
html.theme-warm .proj-card.drag-over-top { outline-color: #b85c38; }
/* Chapter drawer close icon — muted in light themes to not distract from writing */
html:not(.dark):not(.theme-warm) #drawer-close-icon { color: #ddd9d1 !important; }
html:not(.dark):not(.theme-warm) button:hover #drawer-close-icon { color: #94908a !important; }
/* Word goal hover — Tailwind hover:text-primary uses the base dark value, not the theme override */
html.dark #dash-goal-display:hover { color: #a8c0d4 !important; }
html.theme-warm #dash-goal-display:hover { color: #c8a87a !important; }
/* Vocab word card borders — Paper mode: /15 is nearly invisible on white, bump to a warm gray */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #vocab-list .border-outline-variant\/15 { border-color: rgba(43,42,39,0.22) !important; }
/* Vocab checkbox hover:border-primary uses base dark value in dark/sepia */
html.dark #vocab-list button.border-outline-variant\/50:hover { border-color: #909090 !important; }
html.theme-warm #vocab-list button.border-outline-variant\/50:hover { border-color: #b85c38 !important; }
/* Moodboard image fade-in on load */
.moodboard-img { opacity: 0; transition: opacity 0.4s ease; }
.autosave-indicator { display: inline-flex; align-items: center; gap: 5px; }
.autosave-dot { width: 6px; height: 6px; border-radius: 50%; background: #28be5f; display: inline-block; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
/* Page transition */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.page.active { animation: pageIn 0.12s ease; }
/* ── MOBILE SAFE AREA & CORE FIXES ── */
/* Prevent rubber-band overscroll on the root — use body scroll, not html */
html { height: 100%; background: #faf8f4; }
/* Safe area insets for notched phones (iPhone X+) */
.global-bottomnav {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    height: calc(56px + max(0px, env(safe-area-inset-bottom)));
  }
/* Bottom nav touch targets: each button needs min 44×44px */
.nav-btn { min-width: 44px; min-height: 44px; gap: 2px; }
/* All pages need padding equal to bottom nav height so content isn't hidden under it — mobile only */
@media (max-width: 767px) {
    .page { padding-bottom: calc(64px + max(0px, env(safe-area-inset-bottom))) !important; }
    /* Bottom nav is ~56px + safe-area; push modal sheet content above it so buttons aren't hidden */
    .modal-sheet { padding-bottom: calc(max(0px, env(safe-area-inset-bottom)) + 72px) !important; }
  }
@media (min-width: 768px) {
    .page { padding-bottom: 40px !important; }
  }
/* Format toolbar: can overflow on narrow phones (320px) — make it scroll */
.format-toolbar > div { overflow-x: auto; scrollbar-width: none; }
.format-toolbar > div::-webkit-scrollbar { display: none; }
/* Mobile: push toolbar above bottom nav + safe area */
.format-toolbar { bottom: calc(72px + max(12px, env(safe-area-inset-bottom))); }
/* Write mode: nav is hidden, so toolbar sits at the bottom edge */
.write-mode .format-toolbar { bottom: max(12px, env(safe-area-inset-bottom)); }
/* Desktop: bottom nav is hidden, sit close to the bottom edge */
@media (min-width: 768px) {
    .format-toolbar { bottom: 24px; }
    #modal-snippet { align-items: center !important; padding-top: 0 !important; }
  }
/* Cursor never hidden behind toolbar */
#page-write { scroll-padding-bottom: 80px; }
#writing-area { scroll-margin-bottom: 80px; font-weight: 400; }
/* In write mode on mobile, pad bottom of writing area above toolbar */
.write-mode #writing-area { padding-bottom: 80px; }
#writing-area.font-literata { font-weight: 400; }
@media (min-width: 768px) {
    #writing-area { padding-bottom: 100px; }
  }
/* FAB positioning — keep above nav + safe area */
#page-worldwiki .fab-fixed,
  button.fab-fixed { bottom: calc(72px + max(0px, env(safe-area-inset-bottom))); }
/* Writing area: on mobile text-xl is fine; prevent iOS from zooming on focus (font-size must be ≥16px) */
#writing-area { font-size: 16px; }
@media (min-width: 768px) { #writing-area { font-size: 1.25rem; } }
/* Placeholder for contenteditable */
#writing-area.is-empty::before {
    content: attr(data-placeholder);
    color: #9AA0A6;
    pointer-events: none;
    font-style: italic;
    position: absolute;
    top: 0;
    left: 0;
  }
#writing-area { position: relative; }
/* Rendered markdown styles inside the editor */
#writing-area strong, #writing-area b { font-weight: 600; }
#writing-area em, #writing-area i { font-style: italic; }
#writing-area u { text-decoration: underline; }
#writing-area .md-heading {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
    color: #2b2a27;
    display: block;
    margin: 1.5em 0 0.5em;
  }
#writing-area .md-scene-break {
    display: block;
    text-align: center;
    color: #9AA0A6;
    margin: 1.5em 0;
    letter-spacing: 0.3em;
    font-style: normal;
  }
#writing-area .md-quote {
    border-left: 2px solid #2b2a2730;
    padding-left: 1em;
    font-style: italic;
    color: #605c55;
    display: block;
    margin: 0.5em 0;
  }
/* Manuscript Mode: industry-standard indented paragraphs. Paragraph blocks in this editor
     are unclassed <div> children of #writing-area (not <p> tags — see mdToHtml.js), with
     .md-heading / .md-scene-break / .md-quote variants for other block types. First paragraph,
     headings, scene breaks, quotes, and the paragraph immediately after a scene break or
     heading stay flush-left, matching standard manuscript convention. */
#writing-area.manuscript-mode > div {
    text-indent: 0.5in;
  }
#writing-area.manuscript-mode > div:first-child,
  #writing-area.manuscript-mode > div.md-heading,
  #writing-area.manuscript-mode > div.md-scene-break,
  #writing-area.manuscript-mode > div.md-quote,
  #writing-area.manuscript-mode > .md-scene-break + div,
  #writing-area.manuscript-mode > .md-heading + div {
    text-indent: 0;
  }
/* Chapter title input: same zoom prevention */
#chapter-title-input { font-size: 28px; }
@media (min-width: 768px) { #chapter-title-input { font-size: 3rem; } }
/* Suppress browser selection/focus highlight on chapter title in dark mode */
html.dark .chapter-title-field { caret-color: #c8c6c6; color: #6b6e74 !important; }
html.dark :focus-visible {
    outline-color: rgba(232, 230, 227, 0.18);
  }
html.dark .chapter-title-field:focus { color: #e8e6e3 !important; }
html.dark .chapter-title-field::-moz-selection { background: rgba(200,198,198,0.2); }
html.dark .chapter-title-field::selection { background: rgba(200,198,198,0.2); }
html.dark .chapter-title-field::-moz-selection { background: rgba(200,198,198,0.2); }
/* Sepia chapter title field */
html.theme-warm .chapter-title-field { caret-color: #d8cec6; color: #8e8780 !important; }
html.theme-warm :focus-visible { outline-color: rgba(160,155,148,0.20); }
html.theme-warm .chapter-title-field:focus { color: #e6ddd6 !important; }
html.theme-warm .chapter-title-field::-moz-selection { background: rgba(180,140,90,0.25); }
html.theme-warm .chapter-title-field::selection { background: rgba(180,140,90,0.25); }
html.theme-warm .chapter-title-field::-moz-selection { background: rgba(180,140,90,0.25); }
/* Dark / Sepia ink-gradient overrides (progress bar, FAB) */
html.dark .ink-gradient { background: linear-gradient(45deg, #505050 0%, #888888 100%) !important; }
html.theme-warm .ink-gradient { background: linear-gradient(45deg, #b85c38 0%, #d4724a 100%) !important; }
/* Sepia ink-cursor */
html.theme-warm .ink-cursor { border-right-color: #d8cec6 !important; }
/* Sepia glass-panel */
html.theme-warm .glass-panel { background: rgba(36, 35, 34, 0.88) !important; }
/* Sepia timeline tap highlight */
html.theme-warm .tl-tapped { background: rgba(160,155,148,0.10) !important; border-left-color: rgba(160,155,148,0.55) !important; }
html.dark .tl-tapped { background: rgba(255,255,255,0.10) !important; border-left-color: rgba(255,255,255,0.60) !important; }
html.dark .timeline-event:hover { border-left-color: rgba(255,255,255,0.55) !important; }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .timeline-event:hover { background-color: #faf7f2 !important; border-left-color: rgba(193,104,79,0.45) !important; }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .tl-tapped { background: #faf7f2 !important; border-left-color: rgba(193,104,79,0.55) !important; }
html.dark #rel-chart-viewport { background-color: #2e3130 !important; }
/* Espresso scrollbar — warm muted brown */
html.theme-warm .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(180,165,148,0.40); border-radius: 10px; }
html.theme-warm .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(180,165,148,0.70); }
html.theme-warm .custom-scrollbar { scrollbar-color: rgba(180,165,148,0.40) transparent; }
/* Night scrollbar — cool dark grey */
html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(200,196,190,0.20); border-radius: 10px; }
html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(200,196,190,0.40); }
html.dark .custom-scrollbar { scrollbar-color: rgba(200,196,190,0.20) transparent; }
/* Porcelain scrollbar — cool light grey */
html.theme-porcelain .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(180,183,190,0.40); border-radius: 10px; }
html.theme-porcelain .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(180,183,190,0.70); }
html.theme-porcelain .custom-scrollbar { scrollbar-color: rgba(180,183,190,0.40) transparent; }
/* Modals: keyboard-safe on mobile — sheet scrolls internally, active input always visible */
.modal-overlay { align-items: flex-start !important; padding-top: max(env(safe-area-inset-top), 8px); }
.modal-sheet { max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: auto; }
/* Centered confirm dialogs: override the flex-start alignment used by bottom sheets */
.confirm-overlay { align-items: center !important; padding-top: 0 !important; }
/* Inputs inside modals: prevent iOS zoom (must be ≥16px) */
.modal-sheet input,
  .modal-sheet textarea,
  .modal-sheet select { font-size: 16px !important; }
/* Chapters drawer: cap height to screen, scroll internally */
.chapters-drawer { max-height: 100dvh; overflow: hidden; }
/* Panels: ensure they scroll internally, not the whole page */
.panel { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Dossier / wiki detail panels: need bottom padding for nav */
/* Colour palette — opens on hover (desktop) or tap (mobile) */
@media (hover: hover) {
    .palette-hover-group:hover #char-palette-swatches {
      display: flex !important;
    }
  }
#panel-dossier #dossier-panel-body,
  #panel-wiki-detail #wiki-detail-body,
  #panel-snippet-view .panel-snippet-body { padding-bottom: calc(80px + max(0px, env(safe-area-inset-bottom))); }
/* Scratchpad & artifact FAB buttons: keep above nav */
#page-scratchpad button[style*="bottom-24"],
  #page-artifacts .fixed { bottom: calc(72px + max(0px, env(safe-area-inset-bottom))); }
/* Timeline events: the absolute left positioning breaks on very narrow screens */
@media (max-width: 640px) {
    #timeline-events-list .absolute.left-0 { position: relative; margin-bottom: 8px; }
  }
/* Global fallback: override the browser's native blue focus color with the app accent */
:focus { outline-color: rgba(193, 104, 79, 0.5); }
/* Keyboard-navigation ring uses the terracotta accent — never the browser blue */
:focus-visible {
    outline: 2px solid rgba(193, 104, 79, 0.45);
    outline-offset: 2px;
    border-radius: 4px;
  }
/* Inputs, textareas, selects handle focus via border-primary — no ring needed */
input:focus, input:focus-visible,
  textarea:focus, textarea:focus-visible,
  select:focus, select:focus-visible,
  [contenteditable]:focus, [contenteditable]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
  }
/* Toolbar buttons: subtle terracotta ring for keyboard nav, none otherwise */
.format-toolbar button:focus-visible {
    outline: 2px solid rgba(193, 104, 79, 0.3);
  }
html.dark .format-toolbar button:focus-visible {
    outline: 2px solid rgba(193, 104, 79, 0.4);
  }
html.theme-warm .format-toolbar button:focus-visible {
    outline: 2px solid rgba(180, 120, 80, 0.35);
  }
/* Tap highlight: remove grey flash on tap for all interactive elements */
button, a, [onclick] { -webkit-tap-highlight-color: transparent; }
/* Focus mode button — border too faint in dark/sepia, boost visibility */
html.dark .format-toolbar button[onclick="enterFocusMode()"] { border-color: rgba(200,196,190,0.45) !important; color: #c8c6c6 !important; }
html.theme-warm .format-toolbar button[onclick="enterFocusMode()"] { border-color: rgba(180,165,148,0.50) !important; color: #c8b8a8 !important; }
/* Touch-action: let vertical scroll work naturally on scrollable areas */
.no-scrollbar, .chapters-list, .filter-scroll { touch-action: pan-x; }
/* line-clamp cross-browser (older iOS Safari needs webkit prefix) */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Prevent long unbroken words (e.g. long wiki entry titles) from overflowing cards on mobile */
.wiki-card-title, .wiki-entry-title, .char-name, .scene-title { overflow-wrap: break-word; word-break: break-word; }
/* Export page preview: on mobile the sticky preview would overlap content — disable sticky */
@media (max-width: 1024px) {
    #page-export .sticky { position: static; }
  }
/* Scratchpad search border-b: make sure it's visible — border-none was set on the input but border-b is needed */
#scratchpad-search { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid rgba(196,198,204,0.35); }
/* Outline page: chapter inputs inherit body font but need headline font explicitly */
#outline-chapters-list input[type="text"],
  #outline-chapters-list textarea { font-family: 'Manrope', sans-serif; }
/* Focus-exit button: needs top safe area on notch phones */
.focus-exit { top: max(16px, env(safe-area-inset-top)); }
/* Auth gate */
.sync-indicator { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 40px; align-self: center; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #28be5f; flex-shrink: 0; transition: background 0.3s; }
.sync-dot.syncing { background: #ec9c15; animation: pulse 1s infinite; }
.sync-dot.offline { background: #ddd9d1; animation: none; }
.sync-dot.error { background: #b11e1e; animation: none; }
.user-avatar-btn { width: 30px; height: 30px; border-radius: 50%; background: #c1684f; color: white; border: none; cursor: pointer; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; margin: 0 4px; flex-shrink: 0; align-self: center; }
.user-avatar-btn:hover { opacity: 0.8; }
html.dark #panel-dossier .border-primary\/40 { border-color: #6a90aa !important; }
html.dark .user-avatar-btn { background: #3e3e3e; }
html.theme-warm .user-avatar-btn { background: #b85c38; }
.user-menu { position: fixed; background: white; border: 1px solid rgba(196,198,204,0.3); border-radius: 4px; box-shadow: 0 8px 32px rgba(43,42,39,0.12); min-width: 210px; display: none; overflow: hidden; z-index: 9990; }
.user-menu.open { display: block; animation: fadeIn 0.15s ease; }
.user-menu-email { font-family: 'Manrope', sans-serif; font-size: 11px; color: #94908a; padding: 12px 16px 8px; border-bottom: 1px solid rgba(196,198,204,0.2); word-break: break-all; }
.user-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #2b2a27; cursor: pointer; transition: background 0.15s; border: none; background: none; width: 100%; text-align: left; }
.user-menu-item:hover { background: #faf7f2; }
html.theme-porcelain .user-menu-item:hover { background: #eceef2 !important; }
.user-menu-item.danger { color: #b11e1e; }
/* Dark/sepia/porcelain theme overrides — order matters.
   theme-overrides.css is the block that was static in <head>; theme-overrides-late.css is the
   block the original re-injected via JS after Tailwind's CDN styles so it always won on ties.
   Loading -late.css second here reproduces that exact cascade precedence. See migration_plan.md §6.
   (These rules are almost entirely !important, so this ordering is about matching intent, not
   a strict cascade requirement — @import must precede @tailwind syntactically either way.) */
/* ── THEME SWITCH TRANSITIONS ── */
/* Smooth color/bg shifts when toggling themes; kept off interactive elements so hovers stay snappy.
     Writing area is explicitly excluded so highlight/selection styling never gets stuck. */
body,
  .page,
  .global-topbar,
  .global-bottomnav,
  .topbar-color,
  .ns-bird path,
  .ns-name,
  #modern-sidebar,
  .ns-av {
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, stroke 180ms ease !important;
  }
/* Icons outside the writing area */
:not(#writing-area):not(#writing-area *) > .material-symbols-outlined {
    transition: color 180ms ease !important;
  }
#page-write {
    transition: background-color 180ms ease !important;
  }
/* ── PAPER (light) THEME: writing placeholders ──
     The unstyled chapter-title placeholder falls back to @tailwindcss/forms' cold gray-500
     (#6b7280) and the empty-body placeholder was a cold blue-grey (#9aa0a6) — both clash with
     the warm paper palette. Warm them to the same tone as the chapter meta line ("Last Edit…"),
     which is text-on-surface-variant at 50% (rgba(96,92,85,0.5)). Scoped to the light theme via
     :not() so Dark/Espresso keep their own placeholder overrides and Porcelain stays cool. */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapter-title-input::-moz-placeholder {
    color: rgba(96, 92, 85, 0.5) !important;
  }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapter-title-input::placeholder,
  html:not(.dark):not(.theme-warm):not(.theme-porcelain) #writing-area.is-empty::before {
    color: rgba(96, 92, 85, 0.5) !important;
  }
/* ── BACKGROUNDS ── */
html.dark body { background-color: #2e3130; color: #f2f0ed; }
html.dark { background-color: #2e3130; --fmt-panel-bg: #323433; }
html.dark .focus-exit { background: rgba(20,22,21,0.85) !important; }
html.dark .page, html.dark .chickadee-grain { background-color: #292b2a !important; }
html.dark .global-topbar, html.dark .global-bottomnav { background-color: #292b2a !important; border-color: rgba(255,255,255,0.08) !important; }
html.dark .panel, html.dark .modal-sheet,
  html.dark .user-menu { background-color: #323433 !important; }
/* Matches #modern-sidebar's dark background (modern-sidebar.css) rather than the panel/
     modal tone above, so navigating Write <-> other pages doesn't flash a different shade. */
html.dark .chapters-drawer { background-color: #262827 !important; }
html.dark .modal-overlay { background: rgba(0,0,0,0.75) !important; }
html.dark .bg-surface-container-lowest,
  html.dark .bg-white { background-color: #323433 !important; }
html.dark .bg-surface-container-low,
  html.dark .bg-\[#ffffff\],
  html.dark .bg-\[#ffffff\] { background-color: #3a3c3b !important; }
html.dark .bg-surface-container,
  html.dark .bg-surface-container-high,
  html.dark .bg-surface-container-highest { background-color: #444645 !important; }
html.dark .bg-primary { background-color: #6e6e6e !important; }
html.dark .bg-primary-container { background-color: #384859 !important; }
html.dark .bg-tertiary-fixed { background-color: #6b4e1a !important; }
html.dark .bg-error-container { background-color: #471616 !important; }
html.dark .bg-secondary-container { background-color: #383838 !important; }
html.dark [class~='bg-surface'] { background-color: #3a3c3b !important; }
/* Named classes */
html.dark .topbar-color { color: #e8e6e3 !important; }
html.dark .nav-active { color: #e8e6e3 !important; background-color: #3a3c3b !important; }
html.dark .nav-active .material-symbols-outlined { color: #e8e6e3 !important; }
html.dark .chapter-active { background-color: #444645 !important; border-left-color: #c8c6c6 !important; }
html.dark .panel-header { background-color: #323433 !important; }
html.dark .outline-sidebar { background-color: #323433 !important; }
html.dark .export-preview-paper { background-color: #3a3c3b !important; color: #f2f0ed !important; }
html.dark .export-preview-paper * { color: #f2f0ed !important; }
/* ── TEXT ── */
html.dark { color: #f2f0ed; color-scheme: dark; }
/* Attribute selectors beat Tailwind class specificity */
html.dark [class~='text-primary'] { color: #e8e6e3 !important; }
html.dark [class~='text-on-surface'] { color: #f2f0ed !important; }
html.dark [class~='text-on-surface-variant'] { color: #c8c6c6 !important; }
html.dark [class~='text-outline'] { color: #8a8e94 !important; }
html.dark [class~='text-outline-variant'] { color: #6b6e74 !important; }
html.dark [class~='text-gray-500'] { color: #6b6e74 !important; }
html.dark [class~='text-slate-600'] { color: #8a8e94 !important; }
html.dark [class~='text-on-primary-container'] { color: #c8c6c6 !important; }
html.dark [class~='text-on-tertiary-container'] { color: #c5a87d !important; }
html.dark [class~='text-on-tertiary-fixed-variant'] { color: #e7d8bd !important; }
html.dark [class~='text-on-primary'] { color: #f2f0ed !important; }
html.dark [class~='text-on-secondary-container'] { color: #c8c6c6 !important; }
html.dark [class~='text-error'] { color: #fbb6ad !important; }
html.dark [class~='text-on-background'] { color: #f2f0ed !important; }
/* Faded primary variants */
html.dark [class*='text-primary/'] { color: #8a8e94 !important; opacity: 1 !important; }
html.dark [class*='text-primary/']:hover { color: #e8e6e3 !important; }
/* BUG FIX: [class~='text-on-surface-variant'] above only matches the exact class token — it
     does NOT catch Tailwind opacity-modifier variants like text-on-surface-variant/50 (a
     distinct, separately-generated class), which fell through to the light-theme color
     (#605c55) at 50% opacity — nearly invisible against a dark background (e.g. the Write
     page's History button). Same fix already applied to text-primary/ above; mirrored here. */
html.dark [class*='text-on-surface-variant/'] { color: #8a8e94 !important; opacity: 1 !important; }
html.dark [class*='text-on-surface-variant/']:hover { color: #c8c6c6 !important; }
/* Opacity classes make text too faint in dark — reset */
html.dark .opacity-80, html.dark .opacity-70, html.dark .opacity-90 { opacity: 1 !important; }
/* ── SPECIFIC ELEMENTS ── */
html.dark .global-topbar * { color: inherit; }
html.dark .global-topbar .material-symbols-outlined,
  html.dark .global-topbar h1,
  html.dark .global-topbar button,
  html.dark #topbar-left, html.dark #topbar-left *,
  html.dark #topbar-right .material-symbols-outlined { color: #e8e6e3 !important; }
html.dark .global-bottomnav [class~='text-gray-500'] { color: #6b6e74 !important; }
html.dark .global-bottomnav .nav-btn.text-\[#2b2a27\],
  html.dark .global-bottomnav .nav-btn.text-\[#2b2a27\] .material-symbols-outlined { color: #c8c6c6 !important; }
html.dark .desktop-nav-btn { color: #6b6e74 !important; }
html.dark .desktop-nav-btn.text-\[#2b2a27\] { color: #e8e6e3 !important; }
html.dark .desktop-nav-btn:hover { background-color: #3a3c3b !important; color: #e8e6e3 !important; }
html.dark #writing-area { color: #f2f0ed !important; }
html.dark #writing-area .md-heading { color: #e3ddd6 !important; }
html.dark [contenteditable] { color: #f2f0ed !important; }
html.dark ::-moz-selection { background-color: #484848; color: #f2f0ed; }
html.dark ::selection { background-color: #484848; color: #f2f0ed; }
/* Chapter title: dim when idle, bright when editing */
html.dark #chapter-title-input { color: #6b6e74 !important; }
html.dark #chapter-title-input:focus { color: #e8e6e3 !important; }
html.dark #chapter-title-input::-moz-placeholder { color: #8a8e94 !important; }
html.dark #chapter-title-input::placeholder { color: #8a8e94 !important; }
/* Chapter meta line */
html.dark .chapter-meta-line,
  html.dark .chapter-meta-line * { color: #8a8e94 !important; opacity: 1 !important; }
/* ── INPUTS ── */
html.dark input:not([type="range"]):not([type="checkbox"]):not([type="number"]):not(#chapter-title-input),
  html.dark textarea,
  html.dark select { background-color: #3a3c3b !important; color: #f2f0ed !important; border-color: rgba(255,255,255,0.12) !important; }
html.dark input::-moz-placeholder, html.dark textarea::-moz-placeholder { color: #8a8e94 !important; opacity: 1; }
html.dark input::placeholder, html.dark textarea::placeholder { color: #8a8e94 !important; opacity: 1; }
html.dark .user-menu-email { color: #8a8e94 !important; }
html.dark .user-menu-item { color: #f2f0ed !important; }
html.dark .user-menu-item:hover { background-color: #444645 !important; }
/* ── BORDERS ── */
html.dark .border-outline-variant\/10,
  html.dark .border-outline-variant\/15,
  html.dark .border-outline-variant\/20,
  html.dark .border-outline-variant\/30,
  html.dark .border-gray-200\/30 { border-color: rgba(255,255,255,0.1) !important; }
/* ── HOVER STATES ── */
html.dark .hover\:bg-surface-container-low:hover { background-color: #3a3c3b !important; }
html.dark .hover\:bg-surface-container-high:hover { background-color: #323332 !important; }
html.dark .hover\:bg-surface-container-highest:hover { background-color: #363736 !important; }
html.dark .hover\:bg-\[#ffffff\]:hover { background-color: #3a3c3b !important; }
html.dark button[class*="hover:bg-surface"]:hover,
  html.dark button[class*="hover:bg-[#faf7f2]"]:hover { background-color: #3a3c3b !important; }
html.dark .user-menu-item:hover { background-color: #3a3c3b !important; }
/* ── FORMAT TOOLBAR ── */
html.dark .format-toolbar div[class*="bg-surface-container-lowest"] { background-color: rgba(40,41,40,0.95) !important; }
/* ── MISC ── */
html.dark #dash-progress-quote { opacity: 1 !important; color: #8a8e94 !important; }
/* ── SEPIA THEME STATIC OVERRIDES ── */
html.theme-warm body { background-color: #251c16; color: #e6ddd6; }
html.theme-warm { background-color: #251c16; }
html.theme-warm .page, html.theme-warm .chickadee-grain { background-color: #281f19 !important; }
html.theme-warm .global-topbar, html.theme-warm .global-bottomnav { background-color: #281f19 !important; border-color: rgba(160,155,148,0.15) !important; }
html.theme-warm .panel, html.theme-warm .modal-sheet,
  html.theme-warm .user-menu { background-color: #322821 !important; }
/* Matches #modern-sidebar's sepia background (modern-sidebar.css) rather than the panel/
     modal tone above, so navigating Write <-> other pages doesn't flash a different shade. */
html.theme-warm .chapters-drawer { background-color: #241c16 !important; }
html.theme-warm .modal-overlay { background: rgba(0,0,0,0.75) !important; }
html.theme-warm .bg-surface-container-lowest,
  html.theme-warm .bg-white { background-color: #322821 !important; }
html.theme-warm .bg-surface-container-low,
  html.theme-warm .bg-\[#ffffff\],
  html.theme-warm .bg-\[#ffffff\] { background-color: #3a3029 !important; }
html.theme-warm .bg-surface-container,
  html.theme-warm .bg-surface-container-high,
  html.theme-warm .bg-surface-container-highest { background-color: #423a32 !important; }
html.theme-warm .bg-primary { background-color: #b85c38 !important; }
html.theme-warm .bg-primary-container { background-color: #8f3f22 !important; }
html.theme-warm .bg-tertiary-fixed { background-color: #c87a1a !important; }
html.theme-warm .bg-error-container { background-color: #471616 !important; }
html.theme-warm .bg-secondary-container { background-color: #3d332a !important; }
html.theme-warm [class~='text-on-secondary-container'] { color: #d8cec6 !important; }
html.theme-warm [class~='bg-surface'] { background-color: #3a3029 !important; }
html.theme-warm .topbar-color { color: #f0e7de !important; }
html.theme-warm .nav-active { color: #e6ddd6 !important; background-color: #3a3029 !important; }
html.theme-warm .nav-active .material-symbols-outlined { color: #e6ddd6 !important; }
html.theme-warm .chapter-active { background-color: #423a32 !important; border-left-color: #d8cec6 !important; }
html.theme-warm .panel-header { background-color: #322821 !important; }
html.theme-warm .outline-sidebar { background-color: #322821 !important; }
html.theme-warm .export-preview-paper { background-color: #3a3029 !important; color: #e6ddd6 !important; }
html.theme-warm .export-preview-paper * { color: #e6ddd6 !important; }
html.theme-warm { color: #e6ddd6; color-scheme: light; }
/* Prevent browser dark-mode filter from tinting images, canvases and color inputs in sepia */
html.theme-warm img,
  html.theme-warm canvas,
  html.theme-warm input[type="color"],
  html.theme-warm video { filter: none !important; }
html.theme-warm [class~='text-primary'] { color: #f0e7de !important; }
html.theme-warm [class~='text-on-surface'] { color: #e6ddd6 !important; }
html.theme-warm [class~='text-on-surface-variant'] { color: #d8cec6 !important; }
html.theme-warm [class~='text-outline'] { color: #aca6a0 !important; }
html.theme-warm [class~='text-outline-variant'] { color: #8e8780 !important; }
html.theme-warm [class~='text-gray-500'] { color: #aca6a0 !important; }
html.theme-warm [class~='text-slate-600'] { color: #aca6a0 !important; }
html.theme-warm [class~='text-on-background'] { color: #e6ddd6 !important; }
html.theme-warm [class*='text-primary/'] { color: #aca6a0 !important; opacity: 1 !important; }
html.theme-warm [class*='text-primary/']:hover { color: #f0e7de !important; }
/* BUG FIX: same opacity-modifier gap as the dark-theme rule above — see that comment. */
html.theme-warm [class*='text-on-surface-variant/'] { color: #aca6a0 !important; opacity: 1 !important; }
html.theme-warm [class*='text-on-surface-variant/']:hover { color: #d8cec6 !important; }
html.theme-warm .opacity-80, html.theme-warm .opacity-70, html.theme-warm .opacity-90 { opacity: 1 !important; }
html.theme-warm .global-topbar .material-symbols-outlined,
  html.theme-warm .global-topbar h1,
  html.theme-warm .global-topbar button,
  html.theme-warm #topbar-left, html.theme-warm #topbar-left *,
  html.theme-warm #topbar-right .material-symbols-outlined { color: #f0e7de !important; }
html.theme-warm .global-bottomnav [class~='text-gray-500'] { color: #8e8780 !important; }
html.theme-warm .global-bottomnav .nav-btn.text-\[#2b2a27\],
  html.theme-warm .global-bottomnav .nav-btn.text-\[#2b2a27\] .material-symbols-outlined { color: #d8cec6 !important; }
html.theme-warm .desktop-nav-btn { color: #8e8780 !important; }
html.theme-warm .desktop-nav-btn.text-\[#2b2a27\] { color: #f0e7de !important; }
html.theme-warm .desktop-nav-btn:hover { background-color: #3a3029 !important; color: #f0e7de !important; }
html.theme-warm #writing-area { color: #e6ddd6 !important; }
html.theme-warm #writing-area .md-heading { color: #f0e7de !important; }
html.theme-warm [contenteditable] { color: #e6ddd6 !important; }
html.theme-warm ::-moz-selection { background-color: #4e453c; color: #e6ddd6; }
html.theme-warm ::selection { background-color: #4e453c; color: #e6ddd6; }
html.theme-warm #chapter-title-input { color: #8e8780 !important; }
html.theme-warm #chapter-title-input:focus { color: #e6ddd6 !important; }
html.theme-warm #chapter-title-input::-moz-placeholder { color: #aca6a0 !important; }
html.theme-warm #chapter-title-input::placeholder { color: #aca6a0 !important; }
html.theme-warm .chapter-meta-line,
  html.theme-warm .chapter-meta-line * { color: #aca6a0 !important; opacity: 1 !important; }
html.theme-warm input:not([type="range"]):not([type="checkbox"]):not([type="number"]):not(#chapter-title-input),
  html.theme-warm textarea,
  html.theme-warm select { background-color: #3a3029 !important; color: #e6ddd6 !important; border-color: rgba(160,155,148,0.20) !important; }
html.theme-warm input::-moz-placeholder, html.theme-warm textarea::-moz-placeholder { color: #aca6a0 !important; opacity: 1; }
html.theme-warm input::placeholder, html.theme-warm textarea::placeholder { color: #aca6a0 !important; opacity: 1; }
html.theme-warm .user-menu-email { color: #aca6a0 !important; }
html.theme-warm .user-menu-item { color: #e6ddd6 !important; }
html.theme-warm .user-menu-item:hover { background-color: #423a32 !important; }
html.theme-warm .border-outline-variant\/10,
  html.theme-warm .border-outline-variant\/15,
  html.theme-warm .border-outline-variant\/20,
  html.theme-warm .border-outline-variant\/30,
  html.theme-warm .border-gray-200\/30 { border-color: rgba(160,155,148,0.18) !important; }
html.theme-warm .hover\:bg-surface-container-low:hover { background-color: #3a3029 !important; }
html.theme-warm .hover\:bg-surface-container-high:hover { background-color: #423a32 !important; }
html.theme-warm .hover\:bg-surface-container-highest:hover { background-color: #4a413b !important; }
html.theme-warm .hover\:bg-\[#ffffff\]:hover { background-color: #3a3029 !important; }
html.theme-warm button[class*="hover:bg-surface"]:hover,
  html.theme-warm button[class*="hover:bg-[#faf7f2]"]:hover { background-color: #3a3029 !important; }
html.theme-warm .user-menu-item:hover { background-color: #3a3029 !important; }
html.theme-warm .format-toolbar div[class*="bg-surface-container-lowest"] { background-color: rgba(28,27,26,0.95) !important; }
html.theme-warm #dash-progress-quote { opacity: 1 !important; color: #aca6a0 !important; }
html.theme-warm #writing-font-select-desktop { background-color: transparent !important; color-scheme: dark; }
/* Rel chart viewport background in sepia */
html.theme-warm #rel-chart-viewport { background-color: #322821 !important; }
/* Toast */
html.theme-warm .toast { background: #4e453c !important; color: #e6ddd6 !important; }
html.theme-warm #milestone-toast { background: #4e453c !important; color: #e6ddd6 !important; }
/* Writing area md-heading in sepia */
html.theme-warm #writing-area .md-heading { color: #f0e7de !important; }
html.theme-warm #writing-area .md-quote { border-left-color: rgba(160,155,148,0.45) !important; color: #d8cec6 !important; }
html.theme-warm #writing-area .md-scene-break { color: #aca6a0 !important; }
/* Tint white text on primary bg in sepia — avatars, project icon (not buttons) */
html.theme-warm .bg-primary .text-white,
  html.theme-warm .bg-primary-container .text-white,
  html.theme-warm div.bg-primary.text-white,
  html.theme-warm div.bg-primary-container.text-white { color: #e6ddd6 !important; }
html.theme-warm .chapters-drawer { border-right-color: rgba(160,155,148,0.15) !important; }
/* Writing tool */
html.theme-warm { --fmt-panel-bg: #322821; --snippet-textarea-bg: #322821; --snippet-textarea-border: rgba(160,155,148,0.22); }
html.dark { --fmt-panel-bg: #323433; --snippet-textarea-bg: #3a3c3b; --snippet-textarea-border: rgba(255,255,255,0.1); }
html.theme-warm .focus-exit { background: rgba(100,40,20,0.85) !important; color: #e6ddd6 !important; }
html.theme-warm .writing-canvas-shadow { box-shadow: 0 4px 32px rgba(90,63,34,0.06) !important; }
html.theme-warm .panel { box-shadow: -8px 0 40px rgba(0,0,0,0.25) !important; }
html.theme-warm .chapters-drawer { box-shadow: 4px 0 32px rgba(0,0,0,0.25) !important; }
html.theme-warm .drawer-overlay { background: rgba(0,0,0,0.35) !important; }
html.theme-warm .modal-overlay { background: rgba(0,0,0,0.6) !important; }
/* ── PORCELAIN THEME STATIC OVERRIDES ── */
html.theme-porcelain body { background-color: #ffffff; color: #2a2d33; }
html.theme-porcelain .global-topbar { background-color: #ffffff !important; border-color: #c8cdd4 !important; }
/* Library page topbar matches the page background (warm off-white / cool grey) */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) body.ns-hide .global-topbar { background-color: #faf8f4 !important; border-bottom-color: rgba(43,42,39,0.08) !important; }
html.theme-porcelain body.ns-hide .global-topbar { background-color: #f5f6f8 !important; border-bottom-color: #dfe2e7 !important; }
html.theme-porcelain .global-bottomnav { background-color: rgba(255,255,255,0.92) !important; border-color: #c8cdd4 !important; }
html.theme-porcelain .panel, html.theme-porcelain .chapters-drawer, html.theme-porcelain .modal-sheet,
  html.theme-porcelain .user-menu { background-color: #ffffff !important; }
html.theme-porcelain .panel-header { background-color: #ffffff !important; }
html.theme-porcelain .outline-sidebar { background-color: #ffffff !important; }
html.theme-porcelain .chickadee-grain { background-color: #ffffff !important; }
html.theme-porcelain .bg-surface-container-lowest,
  html.theme-porcelain .bg-white { background-color: #ffffff !important; }
html.theme-porcelain .bg-\[#ffffff\],
  html.theme-porcelain .bg-\[#ffffff\] { background-color: #f3f4f6 !important; }
html.theme-porcelain .bg-surface-container,
  html.theme-porcelain .bg-surface-container-high,
  html.theme-porcelain .bg-surface-container-highest { background-color: #ffffff !important; }
html.theme-porcelain .bg-surface-container-low { background-color: #fbfcfd !important; }
html.theme-porcelain [class~='bg-surface'] { background-color: #ffffff !important; }
html.theme-porcelain .bg-primary { background-color: #2a2d33 !important; }
html.theme-porcelain .topbar-color { color: #2a2d33 !important; }
html.theme-porcelain [class~='text-primary'] { color: #2a2d33 !important; }
html.theme-porcelain .chapter-active { background-color: #eef0f2 !important; border-left-color: #2a2d33 !important; }
html.theme-porcelain .nav-active { color: #2a2d33 !important; background-color: #f3f4f6 !important; }
/* Outline text: darken from #94908a (4.49:1) to #606368 (6.03:1) for WCAG AA on white */
html.theme-porcelain [class~='text-outline'],
  html.theme-porcelain [class*='text-outline-'] { color: #606368 !important; }
html.theme-porcelain [class*='text-primary/'] { color: #606368 !important; opacity: 1 !important; }
/* BUG FIX: same opacity-modifier gap as the dark/warm rules above — see that comment. */
html.theme-porcelain [class*='text-on-surface-variant/'] { color: #606368 !important; opacity: 1 !important; }
/* Base text colors inherit warm tones from the paper palette — cool them for porcelain */
html.theme-porcelain .text-on-surface-variant { color: #5b616b !important; }
html.theme-porcelain .text-on-surface { color: #2a2d33 !important; }
/* EXCEPTION — the word processor stays warm. Porcelain cools the app's near-black to a
     blue-grey (#2a2d33), which reads cold on the long-form writing surface; the manuscript
     title + body text are warmed back to the Paper theme's near-black (#2b2a27) so the writing
     canvas feels like paper, not a cool UI. Scoped to #writing-area / #chapter-title-input by
     id so the rest of the Porcelain theme keeps its cool near-black. */
html.theme-porcelain #writing-area,
  html.theme-porcelain #chapter-title-input { color: #2b2a27 !important; }
/* Decorative dividers (topbar, word count bar, section lines) — subtle */
html.theme-porcelain .border-outline-variant\/10,
  html.theme-porcelain .border-outline-variant\/20,
  html.theme-porcelain .border-gray-200\/20,
  html.theme-porcelain .border-gray-200\/30 { border-color: #e2e3e6 !important; }
/* Interactive component borders (inputs, cards, dropdowns) — WCAG 3:1 */
html.theme-porcelain .border-outline-variant\/15,
  html.theme-porcelain .border-outline-variant\/30 { border-color: #868d96 !important; }
html.theme-porcelain .hover\:bg-surface-container-low:hover { background-color: #f3f4f6 !important; }
html.theme-porcelain .hover\:bg-surface-container-high:hover { background-color: #e1e3e6 !important; }
html.theme-porcelain .hover\:bg-surface-container-highest:hover { background-color: #d9dce0 !important; }
html.theme-porcelain .hover\:bg-\[#ffffff\]:hover { background-color: #f3f4f6 !important; }
html.theme-porcelain button[class*="hover:bg-surface"]:hover,
  html.theme-porcelain button[class*="hover:bg-[#faf7f2]"]:hover { background-color: #f3f4f6 !important; }
html.theme-porcelain .ink-gradient { background: linear-gradient(45deg, #3a4654 0%, #8a94a3 100%) !important; }
html.theme-porcelain [class*="bg-[#c1684f]"] { background-color: #5a6678 !important; }
html.theme-porcelain .user-avatar-btn { background: #5a6678 !important; }
html.theme-porcelain .bg-outline-variant\/20,
  html.theme-porcelain .bg-outline-variant\/10 { background-color: #e6e9ef !important; }
html.theme-porcelain ::-moz-selection { background-color: #dbe4f0; color: #2b2a27; }
html.theme-porcelain ::selection { background-color: #dbe4f0; color: #2b2a27; }
html.theme-porcelain { --fmt-panel-bg: #f3f4f6; --snippet-textarea-bg: #f3f4f6; --snippet-textarea-border: rgba(209,213,219,0.5); }
html.theme-porcelain .format-toolbar div[class*="bg-surface-container-lowest"] { background-color: rgba(243,244,246,0.97) !important; border-color: rgba(209,213,219,0.4) !important; }
html.theme-porcelain .format-toolbar div[class*="bg-[#ffffff]"] { background-color: rgba(255,255,255,0.97) !important; border-color: rgba(209,213,219,0.45) !important; }
html.theme-porcelain .chapters-drawer { border-right-color: rgba(209,213,219,0.5) !important; }
html.theme-porcelain .drawer-overlay { background: rgba(0,0,0,0.15) !important; }
html.theme-porcelain .modal-overlay { background: rgba(0,0,0,0.35) !important; }
html.theme-porcelain .export-preview-paper { background-color: #ffffff !important; color: #2b2a27 !important; }
html.theme-porcelain #dash-progress-quote { opacity: 1 !important; }
html.theme-porcelain #rel-chart-viewport { background-color: #ffffff !important; }
html.theme-porcelain #char-cards-list .border { border-color: rgba(196,198,204,0.35) !important; }
html.theme-porcelain #char-cards-list .border-t { border-color: rgba(196,198,204,0.35) !important; }
/* Vocab vault — card borders, checkbox, edit divider */
html.theme-porcelain #vocab-list .border { border-color: rgba(196,198,204,0.35) !important; }
html.theme-porcelain #vocab-list .border-t { border-color: rgba(196,198,204,0.30) !important; }
html.theme-porcelain #vocab-list .border-2 { border-color: rgba(196,198,204,0.60) !important; }
html.theme-porcelain #vocab-list .border-b { border-color: rgba(196,198,204,0.50) !important; }
/* Relationship pin pills — border too strong vs focus pills which have no border */
html.theme-porcelain #rel-pin-pills button { border-color: rgba(196,198,204,0.40) !important; }
html.theme-porcelain #projects-list .border { border-color: rgba(196,198,204,0.30) !important; }
/* Dashed "new entry" buttons — lighter than interactive borders */
html.theme-porcelain .border-dashed { border-color: rgba(196,198,204,0.45) !important; }
/* Display/content cards (wiki featured, char cards etc) — subtle, not interactive weight */
html.theme-porcelain #wiki-featured-card .border { border-color: rgba(196,198,204,0.35) !important; }
/* Wiki filter pills: the bg-surface-container-low shorthand border (rgb(223,226,231)) is too
     faint on the white porcelain background. Use the interactive-component border value instead. */
html.theme-porcelain #wiki-filter-pills button:not(.bg-primary) { border-color: #868d96 !important; border-radius: 4px !important; }
/* Bookmarks in writing area */
.md-bookmark {
    display: inline-flex; align-items: center;
    color: var(--bookmark-text, #6b4800);
    background: var(--bookmark-bg, rgba(237,165,44,0.15));
    border-left: 2px solid var(--bookmark-accent, #eda52c);
    border-radius: 0 3px 3px 0;
    padding: 1px 6px 1px 3px; margin: 0 5px 0 2px;
    cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: middle;
  }
html.dark .md-bookmark { --bookmark-text: #e8d5a0; --bookmark-bg: rgba(200,160,50,0.12); --bookmark-accent: #c8a030; }
html.theme-warm .md-bookmark { --bookmark-text: #d8c090; --bookmark-bg: rgba(180,140,40,0.12); --bookmark-accent: #b89030; }
.confetti-piece {
    position: fixed;
    top: -12px;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    animation: confetti-fall linear forwards;
  }
@keyframes confetti-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
  }
/* ── MOODBOARD DRAG & DROP ── */
.moodboard-upload-zone.drag-over {
    border-color: var(--md-sys-color-primary, #2b2a27) !important;
    background: var(--md-sys-color-primary-container, #e9f0fd) !important;
  }
.moodboard-upload-zone.drag-over span {
    color: var(--md-sys-color-primary, #2b2a27) !important;
  }
/* ── MOODBOARD LIGHTBOX ── */
#moodboard-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
#moodboard-lightbox.open {
    opacity: 1;
    pointer-events: all;
  }
#moodboard-lightbox img {
    max-width: min(92vw, 900px);
    max-height: 88vh;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.6);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
  }
#moodboard-lightbox-prev,
  #moodboard-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 22px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
#moodboard-lightbox-prev { left: 20px; }
#moodboard-lightbox-next { right: 20px; }
#moodboard-lightbox-prev:hover,
  #moodboard-lightbox-next:hover { background: rgba(255,255,255,0.22); }
#moodboard-lightbox-prev:active,
  #moodboard-lightbox-next:active { opacity: 0.7; }
#moodboard-lightbox-close {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 28px;
    border-radius: 2px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
  }
#moodboard-lightbox-close:active { opacity: 0.7; }
/* ── MILESTONE TOAST ── */
#milestone-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--md-sys-color-primary, #2b2a27);
    color: #fff;
    padding: 14px 22px;
    border-radius: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    max-width: calc(100vw - 40px);
    opacity: 0;
    pointer-events: none;
    z-index: 9998;
    transition: opacity 0.35s, transform 0.35s;
    line-height: 1.5;
  }
#milestone-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
html.dark body .text-primary,
html.dark [class~='text-primary']         { color: #e8e6e3 !important; }
html.dark body .text-on-surface           { color: #f2f0ed !important; }
html.dark body .text-on-surface-variant   { color: #c8c6c6 !important; }
html.dark body .text-outline              { color: #8a8e94 !important; }
html.dark body .text-outline-variant      { color: #6b6e74 !important; }
html.dark body .text-gray-500             { color: #6b6e74 !important; }
html.dark body .text-on-primary-container { color: #c8c6c6 !important; }
html.dark body .text-on-tertiary-container { color: #c5a87d !important; }
html.dark body .text-on-tertiary-fixed-variant { color: #c5a87d !important; }
html.dark body .text-on-primary           { color: #f2f0ed !important; }
html.dark body .text-on-secondary-container { color: #c8c6c6 !important; }
html.dark body .text-error                { color: #fbb6ad !important; }
html.dark body .text-slate-600            { color: #8a8e94 !important; }
html.dark .bg-surface-container-lowest,
html.dark .bg-white                       { background-color: #323433 !important; }
html.dark .bg-surface-container-low,
html.dark .bg-[#ffffff],
html.dark .bg-[#ffffff]                   { background-color: #3a3c3b !important; }
html.dark .bg-surface-container,
html.dark .bg-surface-container-high,
html.dark .bg-surface-container-highest   { background-color: #444645 !important; }
html.dark .bg-primary                     { background-color: #6e6e6e !important; }
html.dark .bg-primary-container           { background-color: #384859 !important; }
html.dark .bg-tertiary-fixed              { background-color: #6b4e1a !important; }
html.dark .bg-error-container             { background-color: #471616 !important; }
html.dark .bg-secondary-container         { background-color: #383838 !important; }
html.dark [class~='text-primary/'],
html.dark [class*='text-primary/']        { color: #8a8e94 !important; opacity: 1 !important; }
html.dark .opacity-80, html.dark .opacity-70, html.dark .opacity-90 { opacity: 1 !important; }
html.dark #chapter-title-input:not(:focus) { color: #6b6e74 !important; }
html.dark #chapter-title-input:focus       { color: #e8e6e3 !important; }
html.dark .nav-active { color: #e8e6e3 !important; background-color: #3a3c3b !important; }
html.dark .format-toolbar div[class*="bg-[#ffffff]"] { background-color: rgba(50,52,51,0.95) !important; border-color: rgba(255,255,255,0.08) !important; }
html.theme-warm .format-toolbar div[class*="bg-[#ffffff]"] { background-color: rgba(46,40,38,0.95) !important; border-color: rgba(160,155,148,0.15) !important; }
html.dark [class~='bg-surface'],
html.dark body.bg-surface           { background-color: #3a3c3b !important; }
/* ── SEPIA THEME ── */
html.theme-warm body .text-primary,
html.theme-warm [class~='text-primary']         { color: #f0e7de !important; }
html.theme-warm body .text-on-surface,
html.theme-warm [class~='text-on-surface']      { color: #e6ddd6 !important; }
html.theme-warm body .text-on-surface-variant,
html.theme-warm [class~='text-on-surface-variant'] { color: #d8cec6 !important; }
html.theme-warm [class~='text-outline']         { color: #aca6a0 !important; }
html.theme-warm [class~='text-outline-variant'] { color: #8e8780 !important; }
html.theme-warm [class~='text-gray-500']        { color: #aca6a0 !important; }
html.theme-warm [class~='text-slate-600']       { color: #aca6a0 !important; }
html.theme-warm [class~='text-on-primary']      { color: #fff5f0 !important; }
html.theme-warm [class~='text-on-primary-container'] { color: #d8cec6 !important; }
html.theme-warm [class~='text-on-tertiary-container'] { color: #2e1a08 !important; }
html.theme-warm [class~='text-on-tertiary-fixed-variant'] { color: #2e1a08 !important; }
html.theme-warm [class~='text-on-secondary-container'] { color: #d8cec6 !important; }
html.theme-warm [class~='text-error']           { color: #fbb6ad !important; }
html.theme-warm [class~='text-on-background']   { color: #e6ddd6 !important; }
html.theme-warm [class*='text-primary/']        { color: #aca6a0 !important; opacity: 1 !important; }
html.theme-warm [class*='text-primary/']:hover  { color: #f0e7de !important; }
html.theme-warm .opacity-80, html.theme-warm .opacity-70, html.theme-warm .opacity-90 { opacity: 1 !important; }
html.theme-warm .bg-surface-container-lowest,
html.theme-warm .bg-white                       { background-color: #322821 !important; }
html.theme-warm .bg-surface-container-low,
html.theme-warm .bg-[#ffffff],
html.theme-warm .bg-[#ffffff]                   { background-color: #3a3029 !important; }
html.theme-warm .bg-surface-container,
html.theme-warm .bg-surface-container-high,
html.theme-warm .bg-surface-container-highest   { background-color: #423a32 !important; }
html.theme-warm [class~='bg-surface']           { background-color: #3a3029 !important; }
html.theme-warm .bg-primary                     { background-color: #b85c38 !important; }
html.theme-warm .bg-primary-container           { background-color: #8f3f22 !important; }
html.theme-warm .bg-tertiary-fixed              { background-color: #c87a1a !important; }
html.theme-warm .bg-error-container             { background-color: #471616 !important; }
html.theme-warm .bg-secondary-container         { background-color: #3d332a !important; }
html.theme-warm #chapter-title-input:not(:focus) { color: #8e8780 !important; }
html.theme-warm #chapter-title-input:focus       { color: #e6ddd6 !important; }
html.theme-warm .nav-active { color: #e6ddd6 !important; background-color: #3a3029 !important; }
html.theme-warm #writing-font-select-desktop { background-color: transparent !important; color-scheme: dark; }
/* Paper — warm cream writing page (topbar matches in write mode) */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #page-write { background-color: #faf8f4 !important; }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) body.write-mode .global-topbar {
  background-color: #faf8f4 !important;
  border-bottom-color: rgba(43,42,39,0.08) !important;
}
/* Paper — match word-count-bar divider to the topbar divider above it */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) body.write-mode .word-count-bar {
  border-bottom-color: rgba(43,42,39,0.08) !important;
}
/* Paper — tone down format toolbar to match cream page */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) body.write-mode .format-toolbar div[class*="bg-[#ffffff]"] {
  background-color: rgba(250,248,244,0.97) !important;
  border-color: rgba(43,42,39,0.10) !important;
}
html:not(.dark):not(.theme-warm):not(.theme-porcelain) body.write-mode .format-toolbar div[class*="bg-surface-container-lowest"] {
  background-color: rgba(250,248,244,0.97) !important;
  border-color: rgba(43,42,39,0.10) !important;
}
/* Paper — mute nav button active + hover states in write mode */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) body.write-mode .nav-active {
  background-color: rgba(43,42,39,0.30) !important;
  color: #2b2a27 !important;
}
html:not(.dark):not(.theme-warm):not(.theme-porcelain) body.write-mode .nav-active .material-symbols-outlined {
  color: #2b2a27 !important;
}
html:not(.dark):not(.theme-warm):not(.theme-porcelain) body.write-mode .desktop-nav-btn:hover {
  background-color: rgba(43,42,39,0.16) !important;
}
/* Paper — write-nav-trigger blends with cream topbar */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #write-nav-trigger {
  background: rgba(43,42,39,0.03) !important;
  border-color: rgba(43,42,39,0.08) !important;
  color: #8a8579 !important;
}
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #write-nav-trigger:hover {
  background: rgba(43,42,39,0.14) !important;
  color: #2b2a27 !important;
}
/* Porcelain — pure white + cool grey containers */
html.theme-porcelain [class~='bg-surface'],
html.theme-porcelain body { background-color: #ffffff !important; }
html.theme-porcelain .bg-[#ffffff],
html.theme-porcelain .bg-[#faf7f2] { background-color: #f3f4f6 !important; }
/* ── World Wiki: warm-mode category count buttons need more visible borders ── */
html.theme-warm #wiki-category-counts button {
  border-color: rgba(160,148,130,0.40) !important;
}
/* ── Write page: gradient veil below sticky topbar (desktop) ──
   Softly fades content as it scrolls under the header so the bar
   doesn't feel like a hard cut through the manuscript. */
@media (min-width: 768px) {
  body.write-mode .global-topbar { overflow: visible; }
  body.write-mode .global-topbar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 52px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(250,248,244,0.88) 0%, transparent 100%);
  }
  html.dark body.write-mode .global-topbar::after {
    background: linear-gradient(to bottom, rgba(41,43,42,0.88) 0%, transparent 100%);
  }
  html.theme-warm body.write-mode .global-topbar::after {
    background: linear-gradient(to bottom, rgba(40,31,25,0.88) 0%, transparent 100%);
  }
  html.theme-porcelain body.write-mode .global-topbar::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0.88) 0%, transparent 100%);
  }
}
/* ── Overscroll band: match each theme's background so rubber-band bounce is seamless ── */
html.dark #content-scroll-area { background-color: #2e3130; }
html.theme-warm #content-scroll-area { background-color: #251c16; }
html.theme-porcelain #content-scroll-area { background-color: #ffffff; }
/* "Modern" retrofit layers — all confirmed live in production, see migration_plan.md §1 */
/* ============================================================
   NOTION SKIN — light theme only (dark/sepia keep their look).
   Pure styling layer: no markup, links, or tools are changed.
   ============================================================ */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-surface-container-low,
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-surface-container,
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-surface-container-high,
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-surface-container-highest{
  background-color:#ffffff !important;
  border:1px solid #ece9e3 !important;
  border-radius:8px !important;
  box-shadow:none !important;
}
/* Interactive surfaces — subtle warm hover + lift (paper only; porcelain has its own cool-grey rules) */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) button.bg-surface-container-low:hover,
html:not(.dark):not(.theme-warm):not(.theme-porcelain) button.bg-surface-container-high:hover,
html:not(.dark):not(.theme-warm):not(.theme-porcelain) button.bg-surface-container-highest:hover{
  background-color:#faf7f2 !important;
  border-color:#ddd9d1 !important;
}
/* Tool / list rows on the dashboard & world pages — lift on hover */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) button.bg-surface-container-low:hover{
  box-shadow:0 4px 16px rgba(43,42,39,.05) !important;
}
/* Accent icon tiles → soft terracotta wash with a terracotta glyph */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-primary-container{
  background-color:#f5e7e0 !important;
  border-radius:7px !important;
}
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-primary-container .material-symbols-outlined,
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-primary-container .text-white{ color:#9a4a32 !important; }
/* Dark mode: same terracotta-accent tile treatment, no blue */
html.dark .bg-primary-container{ background-color:#2e2e2e !important; border-radius:7px !important; }
html.dark .bg-primary-container .material-symbols-outlined,
html.dark .bg-primary-container .text-white{ color:#b4b4b4 !important; }
/* Page-header accent bars → terracotta (porcelain keeps its own monotone accent, set below) */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-primary[style*="height:4px"],
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-primary[style*="height: 4px"]{ background-color:#c1684f !important; }
html.theme-porcelain .bg-primary[style*="height:4px"],
html.theme-porcelain .bg-primary[style*="height: 4px"]{ background-color:#5a6678 !important; }
/* Primary (ink) buttons — refine radius, keep ink */
html:not(.dark):not(.theme-warm) .bg-primary{ border-radius:7px !important; }
/* Progress / faint tracks */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-outline-variant\/20,
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .bg-outline-variant\/10{ background-color:#f0ece4 !important; }
/* Top nav — emphasize every link, terracotta active state */
html:not(.dark):not(.theme-warm) .desktop-nav-btn{ border-radius:7px !important; }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .desktop-nav-btn:hover{ background-color:#faf7f2 !important; color:#2b2a27 !important; }
html.theme-porcelain .desktop-nav-btn:hover{ background-color:#eceef2 !important; color:#2a2d33 !important; }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .nav-active{ color:#9a4a32 !important; background-color:#f5e7e0 !important; }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .nav-active .material-symbols-outlined{ color:#c1684f !important; }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) .global-bottomnav .nav-active{ color:#c1684f !important; background:transparent !important; }
/* Headlines — Modern tracking */
html:not(.dark):not(.theme-warm) .font-headline{ letter-spacing:-0.025em; }
/* Modals / slide-in panels — hairline edge */
html:not(.dark):not(.theme-warm) .modal-sheet{ border:1px solid #ece9e3; border-radius:14px 14px 0 0; }
html:not(.dark):not(.theme-warm) .panel{ border-left:1px solid #ece9e3; }
/* Chart viewport / relationship board — hairline frame */
html:not(.dark):not(.theme-warm) #rel-chart-viewport{ border-color:#ece9e3 !important; border-radius:10px !important; }
/* Dashed "new" buttons — warm hairline (porcelain keeps its own monotone hover, set below) */
html:not(.dark):not(.theme-warm) [class*="border-dashed"]{ border-color:#ddd9d1 !important; }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) [class*="border-dashed"]:hover{ border-color:#c1684f !important; }
html.theme-porcelain [class*="border-dashed"]:hover{ border-color:#5a6678 !important; }
/* ============================================================
   MODERN LEFT SIDEBAR — desktop nav (light theme).
   Mirrors the approved redesign; wired to existing navigateTo().
   ============================================================ */
#modern-sidebar{ display:none; }
@media (min-width:768px){
  #modern-sidebar{
    position:fixed; left:0; top:0; bottom:0; width:252px; z-index:70;
    background:#faf8f4; border-right:1px solid #ece9e3;
    padding:16px 12px 16px; display:flex; flex-direction:column; gap:2px; overflow-y:auto;
    font-family:'Geist',sans-serif;
  }
  body{ padding-left:252px; }
  /* the app's own desktop nav + mobile bottom bar + redundant topbar brand step aside */
  #desktop-nav{ display:none !important; }
  .global-bottomnav{ display:none !important; }
  #topbar-left{ visibility:hidden !important; }
  body.ns-hide #topbar-left{ visibility:visible !important; }
  /* keep the floating writing toolbar centred over the shifted canvas */
  #format-toolbar{ left:calc(50% + 126px) !important; }
  /* Library (projects) is the entry point — no workspace sidebar there */
  body.ns-hide{ padding-left:0 !important; }
  body.ns-hide #modern-sidebar{ display:none !important; }
  body.ns-hide #format-toolbar{ left:50% !important; }
  /* WRITE MODE — the left sidebar gives way to a top dropdown nav so the
     writer can focus, and the chapter drawer stays fully visible / pinnable */
  body.write-mode:not(.drawer-pinned){ padding-left:0 !important; }
  body.write-mode #modern-sidebar{ display:none !important; }
  body.write-mode #format-toolbar{ left:50% !important; }
  body.write-mode.drawer-pinned #format-toolbar{ left:calc(50% + 126px) !important; }
  /* Restore topbar-left on write page (hidden by the rule above for sidebar pages);
     re-hide it when the drawer is pinned since the drawer's own header shows the logo + close button */
  body.write-mode #topbar-left{ visibility:visible !important; }
  body.write-mode.drawer-pinned #topbar-left{ visibility:hidden !important; }
}
.ns-brand{ display:flex; align-items:center; gap:9px; padding:4px 8px 14px; border-bottom:1px solid #ece9e3; margin-bottom:6px; cursor:pointer; }
.ns-tile{ width:24px;height:24px;border-radius:6px;background:#2b2a27;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex-shrink:0; }
.ns-name{ font-family:'Geist',sans-serif; font-weight:600;font-size:15px;letter-spacing:-.02em;color:#2b2a27; }
.ns-bird{ width:26px;height:26px;flex-shrink:0; }
.ns-bird path{ fill:none;stroke:#2b2a27;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.ns-bird .ns-bird-ac{ stroke:#c1684f; }
.ns-group{ font-family:'Geist',sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#94908a; padding:14px 8px 4px; }
.ns-item{ display:flex;align-items:center;gap:10px;padding:9px 9px;border-radius:6px;color:#605c55;cursor:pointer;font-size:13.5px;line-height:1.3;border:1px solid transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-bottom:3px; }
.ns-item:hover{ background:#f1ece3; color:#2b2a27; }
.ns-item.active{ background:#f5e7e0; color:#9a4a32; }
.ns-item .material-symbols-outlined{ font-size:18px; color:#94908a; flex-shrink:0; }
.ns-item:hover .material-symbols-outlined{ color:#605c55; }
.ns-item.active .material-symbols-outlined{ color:#c1684f; }
.ns-foot{ margin-top:auto; border-top:1px solid #ece9e3; padding-top:12px; display:flex; align-items:center; gap:9px; cursor:pointer; color:#605c55; font-size:13px; }
.ns-foot:hover{ color:#2b2a27; }
.ns-av{ width:26px;height:26px;border-radius:50%;background:#f5e7e0;color:#9a4a32;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;font-family:'Geist',sans-serif;flex-shrink:0; }
/* ── Sidebar — DARK theme ── */
html.dark #modern-sidebar{ background:#262827; border-right-color:rgba(255,255,255,.08); }
html.dark .ns-brand{ border-bottom-color:rgba(255,255,255,.08); }
html.dark .ns-tile{ background:#f2f0ed; color:#262827; }
html.dark .ns-name{ color:#f2f0ed; }
html.dark .ns-bird path{ stroke:#f2f0ed; }
html.dark .ns-bird .ns-bird-ac{ stroke:#909090; }
html.dark .ns-group{ color:#8b8e8c; }
html.dark .ns-item{ color:#bdbfbc; }
html.dark .ns-item .material-symbols-outlined{ color:#8b8e8c; }
html.dark .ns-item:hover{ background:#333635; color:#f2f0ed; }
html.dark .ns-item:hover .material-symbols-outlined{ color:#bdbfbc; }
html.dark .ns-item.active{ background:#2b2b2b; color:#b4b4b4; }
html.dark .ns-item.active .material-symbols-outlined{ color:#909090; }
html.dark .ns-foot{ border-top-color:rgba(255,255,255,.08); color:#bdbfbc; }
html.dark .ns-foot:hover{ color:#f2f0ed; }
html.dark .ns-foot .material-symbols-outlined{ color:#8b8e8c !important; }
html.dark .ns-av{ background:#2b2b2b; color:#b4b4b4; }
/* ── Sidebar — SEPIA theme ── */
html.theme-warm #modern-sidebar{ background:#241c16; border-right-color:rgba(180,165,148,.18); }
html.theme-warm .ns-brand{ border-bottom-color:rgba(180,165,148,.18); }
html.theme-warm .ns-tile{ background:#e6ddd6; color:#241c16; }
html.theme-warm .ns-name{ color:#e6ddd6; }
html.theme-warm .ns-bird path{ stroke:#e6ddd6; }
html.theme-warm .ns-bird .ns-bird-ac{ stroke:#b85c38; }
html.theme-warm .ns-group{ color:#9a8d7e; }
html.theme-warm .ns-item{ color:#cabbac; }
html.theme-warm .ns-item .material-symbols-outlined{ color:#9a8d7e; }
html.theme-warm .ns-item:hover{ background:#33271e; color:#f0e7dd; }
html.theme-warm .ns-item:hover .material-symbols-outlined{ color:#cabbac; }
html.theme-warm .ns-item.active{ background:#43301f; color:#e0a06f; }
html.theme-warm .ns-item.active .material-symbols-outlined{ color:#d4724a; }
html.theme-warm .ns-foot{ border-top-color:rgba(180,165,148,.18); color:#cabbac; }
html.theme-warm .ns-foot:hover{ color:#f0e7dd; }
html.theme-warm .ns-foot .material-symbols-outlined{ color:#9a8d7e !important; }
html.theme-warm .ns-av{ background:#43301f; color:#e0a06f; }
/* ── Sidebar — PORCELAIN theme (cool, crisp — no warm tone) ── */
html.theme-porcelain #modern-sidebar{ background:#f5f6f8; border-right-color:#dfe2e7; }
html.theme-porcelain .ns-brand{ border-bottom-color:#dfe2e7; }
html.theme-porcelain .ns-tile{ background:#2a2d33; color:#fff; }
html.theme-porcelain .ns-name{ color:#2a2d33; }
html.theme-porcelain .ns-bird path{ stroke:#2a2d33; }
html.theme-porcelain .ns-bird .ns-bird-ac{ stroke:#5a6678; }
html.theme-porcelain .ns-group{ color:#8a8f98; }
html.theme-porcelain .ns-item{ color:#5b616b; }
html.theme-porcelain .ns-item .material-symbols-outlined{ color:#9aa0a9; }
html.theme-porcelain .ns-item:hover{ background:#eceef2; color:#2a2d33; }
html.theme-porcelain .ns-item:hover .material-symbols-outlined{ color:#5b616b; }
html.theme-porcelain .ns-item.active{ background:#e6e9ef; color:#3a4654; }
html.theme-porcelain .ns-item.active .material-symbols-outlined{ color:#5a6678; }
html.theme-porcelain .ns-foot{ border-top-color:#dfe2e7; color:#5b616b; }
html.theme-porcelain .ns-foot:hover{ color:#2a2d33; }
html.theme-porcelain .ns-foot .material-symbols-outlined{ color:#9aa0a9 !important; }
html.theme-porcelain .ns-av{ background:#e6e9ef; color:#3a4654; }
/* Write-mode dropdown — porcelain cool */
html.theme-porcelain #write-nav-trigger{ background:#f5f6f8; border-color:#dfe2e7; color:#5b616b; }
html.theme-porcelain #write-nav-trigger:hover{ background:#eceef2; color:#2a2d33; }
html.theme-porcelain #write-nav-menu{ background:#ffffff; border-color:#dfe2e7; box-shadow:0 14px 38px rgba(40,44,52,.10); }
html.theme-porcelain #write-nav-menu .wn-group{ color:#8a8f98; }
html.theme-porcelain #write-nav-menu .wn-item{ color:#5b616b; }
html.theme-porcelain #write-nav-menu .wn-item .material-symbols-outlined{ color:#9aa0a9; }
html.theme-porcelain #write-nav-menu .wn-item:hover{ background:#eceef2; color:#2a2d33; }
html.theme-porcelain #write-nav-menu .wn-item.active{ background:#e6e9ef; color:#3a4654; }
html.theme-porcelain #write-nav-menu .wn-item.active .material-symbols-outlined{ color:#5a6678; }
/* Modern-skin cards & drawer — cool hairlines instead of warm (porcelain) */
html.theme-porcelain .bg-surface-container-low,
html.theme-porcelain .bg-surface-container,
html.theme-porcelain .bg-surface-container-high,
html.theme-porcelain .bg-surface-container-highest{ border:1px solid #dfe2e7 !important; border-radius:8px !important; box-shadow:none !important; }
html.dark .bg-surface-container,
html.dark .bg-surface-container-high,
html.dark .bg-surface-container-highest,
html.dark .rounded-sm{ border-radius:8px !important; }
html.theme-warm .bg-surface-container,
html.theme-warm .bg-surface-container-high,
html.theme-warm .bg-surface-container-highest,
html.theme-warm .rounded-sm{ border-radius:8px !important; }
html.theme-porcelain .bg-primary-container{ background-color:#e6e9ef !important; }
html.theme-porcelain .bg-primary-container .material-symbols-outlined,
html.theme-porcelain .bg-primary-container .text-white{ color:#5a6678 !important; }
html.theme-porcelain #chapters-drawer{ background:#f5f6f8 !important; border-right-color:#dfe2e7 !important; }
html.theme-porcelain #chapters-drawer-list .group:hover{ background:#eceef2 !important; }
html.theme-porcelain #chapters-drawer-list .chapter-active{ background:#e6e9ef !important; }
html.theme-porcelain #chapters-drawer-list .chapter-active > span:first-child{ color:#5a6678 !important; }
html.theme-porcelain #chapters-drawer-list .chapter-active > span:nth-child(2){ color:#3a4654 !important; }
html.theme-porcelain #chapters-drawer > button:hover{ border-color:#9aa0a9 !important; color:#3a4654 !important; }
html.theme-porcelain .word-count-bar{ border-bottom-color:#dfe2e7 !important; }
/* Theme-aware hover bg for topbar/menu buttons — the hardcoded cream (#faf7f2)
   flashes jarringly bright when hovering after switching to a dark theme */
html.dark .hover\:bg-\[#faf7f2\]:hover{ background-color:#3a3c3b !important; }
html.theme-warm .hover\:bg-\[#faf7f2\]:hover{ background-color:#3a3029 !important; }
html.theme-porcelain .hover\:bg-\[#faf7f2\]:hover{ background-color:#eceef2 !important; }
/* Sidebar scrollbar — blend into the rail on every theme */
#modern-sidebar{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
#modern-sidebar:hover{ scrollbar-color:rgba(148,144,138,.35) transparent; }
#modern-sidebar::-webkit-scrollbar{ width:8px; }
#modern-sidebar::-webkit-scrollbar-track{ background:transparent; }
#modern-sidebar::-webkit-scrollbar-thumb{ background:transparent; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
#modern-sidebar:hover::-webkit-scrollbar-thumb{ background:rgba(148,144,138,.35); background-clip:content-box; }
#modern-sidebar::-webkit-scrollbar-thumb:hover{ background:rgba(148,144,138,.55); background-clip:content-box; }
/* ── WRITE-MODE TOP DROPDOWN NAV (replaces the left sidebar in write mode) ── */
/* On mobile the Navigate button is positioned statically in the right side (not
   absolutely centered), so no max-width cap is needed — let the flex layout give
   the title as much space as the right-side buttons leave over. */
#write-nav-trigger{ display:none; align-items:center; gap:6px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:'Geist',sans-serif; font-size:13px; font-weight:500; color:#605c55; background:#faf8f4; border:1px solid #ece9e3; border-radius:8px; padding:7px 14px 7px 12px; cursor:pointer; z-index:55; }
body.write-mode #write-nav-trigger{ display:inline-flex; }
#write-nav-trigger .wn-icon-mobile{ display:none; }
@media (max-width: 767px) {
  #write-nav-trigger{ position:static; transform:none; padding:7px; gap:0; background:transparent !important; border:none !important; }
  #write-nav-trigger span:not(.material-symbols-outlined){ display:none; }
  #write-nav-trigger .wn-icon-desktop{ display:none; }
  #write-nav-trigger .wn-icon-mobile{ display:inline-flex; color:inherit; }
  #write-nav-trigger .material-symbols-outlined{ color:inherit; }
  #write-nav-trigger:hover{ background:transparent; }
}
#write-nav-trigger:hover{ background:#f1ece3; color:#2b2a27; }
#write-nav-trigger .material-symbols-outlined{ font-size:18px; color:#94908a; transition:transform .2s ease; }
#write-nav-trigger.open .material-symbols-outlined{ transform:rotate(180deg); }
@media (max-width: 767px) {
  #write-nav-trigger:hover{ background:transparent !important; }
  #write-nav-trigger .material-symbols-outlined{ color:inherit !important; font-size:22px; }
}
#write-nav-menu{ display:none; position:fixed; z-index:130; width:236px; background:#ffffff; border:1px solid #ece9e3; border-radius:11px; box-shadow:0 14px 38px rgba(43,42,39,.14); padding:8px; font-family:'Geist',sans-serif; max-height:78vh; overflow-y:auto; }
#write-nav-menu.open{ display:block; animation:wnIn .14s ease; }
@keyframes wnIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
#write-nav-menu .wn-group{ font-family:'Geist',sans-serif; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#94908a; padding:11px 8px 4px; }
#write-nav-menu .wn-group:first-child{ padding-top:4px; }
#write-nav-menu .wn-item{ display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:7px; color:#605c55; cursor:pointer; font-size:13.5px; }
#write-nav-menu .wn-item:hover{ background:#f1ece3; color:#2b2a27; }
#write-nav-menu .wn-item.active{ background:#f5e7e0; color:#9a4a32; }
#write-nav-menu .wn-item .material-symbols-outlined{ font-size:18px; color:#94908a; }
#write-nav-menu .wn-item.active .material-symbols-outlined{ color:#c1684f; }
/* dark + sepia adaptations */
html.dark #write-nav-trigger{ background:#323433; border-color:rgba(255,255,255,.12); color:#cfcdc9; }
html.dark #write-nav-trigger:hover{ background:#3d3f3e; color:#fff; }
html.dark #write-nav-menu{ background:#323433; border-color:rgba(255,255,255,.12); box-shadow:0 14px 38px rgba(0,0,0,.5); }
html.dark #write-nav-menu .wn-group{ color:#6b6e74; }
html.dark #write-nav-menu .wn-item{ color:#cfcdc9; }
html.dark #write-nav-menu .wn-item .material-symbols-outlined{ color:#6b6e74; }
html.dark #write-nav-menu .wn-item:hover{ background:#3d3f3e; color:#fff; }
html.dark #write-nav-menu .wn-item:hover .material-symbols-outlined{ color:#cfcdc9; }
html.dark #write-nav-menu .wn-item.active{ background:#3d3f3e; color:#e8e6e3; }
html.dark #write-nav-menu .wn-item.active .material-symbols-outlined{ color:#c1684f; }
html.theme-warm #write-nav-trigger{ background:#322821; border-color:rgba(160,155,148,.2); color:#e6ddd6; }
html.theme-warm #write-nav-trigger:hover{ background:#3c3128; color:#fff; }
html.theme-warm #write-nav-menu{ background:#322821; border-color:rgba(160,155,148,.2); }
html.theme-warm #write-nav-menu .wn-group{ color:#8e8780; }
html.theme-warm #write-nav-menu .wn-item{ color:#e6ddd6; }
html.theme-warm #write-nav-menu .wn-item .material-symbols-outlined{ color:#8e8780; }
html.theme-warm #write-nav-menu .wn-item:hover{ background:#3c3128; color:#f0e7de; }
html.theme-warm #write-nav-menu .wn-item:hover .material-symbols-outlined{ color:#d8cec6; }
html.theme-warm #write-nav-menu .wn-item.active{ background:#3c3128; color:#f0e7de; }
html.theme-warm #write-nav-menu .wn-item.active .material-symbols-outlined{ color:#b85c38; }
/* ============================================================
   CHAPTER DRAWER — reskinned to match the modern left sidebar
   (paper theme only; dark/sepia/porcelain keep their own treatment).
   Pure styling layer — render logic untouched.
   ============================================================ */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer{
  background:#faf8f4 !important; border-right:1px solid #ece9e3 !important;
  font-family:'Manrope',sans-serif;
}
/* header */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer > div:first-child{
  border-bottom:1px solid #ece9e3 !important;
}
/* list padding */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list{ padding:8px !important; }
/* chapter rows → ns-item feel */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list .group{
  border-radius:7px !important; padding:8px 9px !important; margin-bottom:1px;
}
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list .group:hover{ background:#f1ece3 !important; }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list .chapter-active{ background:#f5e7e0 !important; }
/* chapter number → mono, muted */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list .group > span:first-child{
  font-family:'Manrope',sans-serif !important; font-weight:500 !important;
  font-size:10px !important; color:#94908a !important;
}
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list .chapter-active > span:first-child{ color:#c1684f !important; }
/* title */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list .group > span:nth-child(2){
  font-family:'Manrope',sans-serif !important; font-weight:500 !important;
  font-size:13.5px !important; color:#605c55 !important; letter-spacing:-.005em !important;
}
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list .group:hover > span:nth-child(2){ color:#2b2a27 !important; }
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list .chapter-active > span:nth-child(2){ color:#9a4a32 !important; font-weight:600 !important; }
/* word count → mono, muted */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list .group > span:nth-child(3){
  font-family:'Manrope',sans-serif !important; font-size:10px !important; color:#94908a !important;
}
/* bookmarks */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer-list .ml-2 span:last-child{
  font-family:'Manrope',sans-serif !important; color:#94908a !important;
}
/* New Chapter button → match sidebar dashed-add */
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer > button{
  border:1px dashed #ddd9d1 !important; border-radius:7px !important; color:#94908a !important;
  font-family:'Manrope',sans-serif !important; text-transform:none !important;
  letter-spacing:normal !important; font-size:12.5px !important; font-weight:500 !important; padding:11px !important;
}
html:not(.dark):not(.theme-warm):not(.theme-porcelain) #chapters-drawer > button:hover{
  border-color:#c1684f !important; color:#9a4a32 !important; background:transparent !important;
}
/* ── PORCELAIN chapters drawer ── */
html.theme-porcelain #chapters-drawer > div:first-child{
  border-bottom:1px solid #dfe2e7 !important;
}
html.theme-porcelain #chapters-drawer-list{ padding:8px !important; }
html.theme-porcelain #chapters-drawer-list .group{
  border-radius:7px !important; padding:8px 9px !important; margin-bottom:1px;
}
html.theme-porcelain #chapters-drawer-list .group > span:first-child{ color:#9aa0a9 !important; }
html.theme-porcelain #chapters-drawer-list .group > span:nth-child(2){ color:#5b616b !important; font-weight:500 !important; font-size:13.5px !important; }
html.theme-porcelain #chapters-drawer-list .group:hover > span:nth-child(2){ color:#2a2d33 !important; }
html.theme-porcelain #chapters-drawer-list .group > span:nth-child(3){ color:#9aa0a9 !important; }
html.theme-porcelain #chapters-drawer-list .ml-2 span:last-child{ color:#9aa0a9 !important; }
html.theme-porcelain #chapters-drawer > button{
  border:1px dashed rgba(134,141,150,0.4) !important; border-radius:7px !important; color:#868d96 !important;
  text-transform:none !important; letter-spacing:normal !important; font-size:12.5px !important; font-weight:500 !important; padding:11px !important;
}
/* drawer scrollbar — blend into the rail like the sidebar (all themes) */
#chapters-drawer-list{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
#chapters-drawer-list:hover{ scrollbar-color:rgba(148,144,138,.35) transparent; }
#chapters-drawer-list::-webkit-scrollbar{ width:8px; }
#chapters-drawer-list::-webkit-scrollbar-track{ background:transparent; }
#chapters-drawer-list::-webkit-scrollbar-thumb{ background:transparent; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
#chapters-drawer-list:hover::-webkit-scrollbar-thumb{ background:rgba(148,144,138,.35); background-clip:content-box; }
/* ============================================================
   RELATIONSHIPS — Modern redesign (light theme), real app data.
   ============================================================ */
#page-relationships .rl2-wrap{ max-width:1120px; margin:0 auto; padding:40px 30px 90px; font-family:'Manrope',sans-serif; }
.rl2-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.rl2-eyebrow{ font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#94908a; }
.rl2-title{ font-family:'Geist',sans-serif; font-weight:800; font-size:40px; letter-spacing:-.05em; color:#2b2a27; line-height:1; margin:6px 0; }
.rl2-sub{ font-family:'Geist',sans-serif; font-weight:400; color:#605c55; font-size:13.5px; max-width:440px; margin:0; }
.rl2-head-r{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.rl2-seg{ display:flex; border:1px solid #ece9e3; border-radius:7px; overflow:hidden; background:#fff; }
.rl2-seg .s{ font-family:'Manrope',sans-serif; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; padding:8px 13px; color:#94908a; display:inline-flex; align-items:center; gap:6px; border-right:1px solid #ece9e3; cursor:pointer; }
.rl2-seg .s:last-child{ border-right:0; }
.rl2-seg .s.active{ background:#2b2a27; color:#faf7f2; }
.rl2-seg .s .material-symbols-outlined{ font-size:14px; }
.rl2-pinned{ font-family:'Manrope',sans-serif; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#94908a; }
.rl2-filters{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; border:1px solid #ece9e3; border-radius:9px; background:#faf8f4; margin-bottom:20px; }
.rl2-f{ display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.rl2-flabel{ font-family:'Manrope',sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#94908a; min-width:96px; padding-top:5px; }
.rl2-f .chips{ display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.rl2-chip{ font-size:12px; color:#605c55; padding:5px 10px; border:1px solid #ece9e3; border-radius:5px; background:#fff; cursor:pointer; letter-spacing:-.005em; }
.rl2-chip:hover{ border-color:#ddd9d1; }
.rl2-chip.active{ background:#2b2a27; color:#faf7f2; border-color:#2b2a27; }
.rl2-leg{ display:inline-flex; align-items:center; gap:8px; font-family:'Manrope',sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#605c55; padding:5px 10px 5px 8px; border:1px solid #ece9e3; border-radius:5px; background:#fff; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; user-select:none; }
.rl2-leg i{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.rl2-leg.off{ opacity:.4; text-decoration:line-through; }
.rl2-board-grid{ display:flex; flex-direction:column; gap:18px; }
@media (max-width:767px){ .rl2-graph{ aspect-ratio:auto; width:100%; height:420px; } }
/* "Pin to centre" / "Show" rows: the label's fixed min-width (96px) plus the chips crowd each
   other on a narrow screen. Stack label above its own chip row instead of sitting beside it. */
@media (max-width:767px){ .rl2-f{ flex-direction:column; align-items:flex-start; gap:6px; } .rl2-flabel{ min-width:0; padding-top:0; } }
.rl2-graph{ border:1px solid #ece9e3; border-radius:10px; background:#fff; overflow:hidden; position:relative; aspect-ratio:1024/560; cursor:grab; }
.rl2-graph:active{ cursor:grabbing; }
#rl2-svg{ display:block; width:100%; height:100%; }
.rl2-corner{ position:absolute; top:12px; left:14px; font-family:'Manrope',sans-serif; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#94908a; }
.rl2-zoom{ position:absolute; bottom:14px; right:14px; display:flex; align-items:center; background:#fff; border:1px solid #ece9e3; border-radius:7px; padding:2px; }
.rl2-zb{ width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center; color:#605c55; cursor:pointer; }
.rl2-zb:hover{ background:#faf7f2; }
.rl2-zb .material-symbols-outlined{ font-size:16px; }
.rl2-zlevel{ font-family:'Manrope',sans-serif; font-size:10.5px; color:#605c55; padding:0 8px; min-width:46px; text-align:center; }
.rl2-zsep{ width:1px; height:18px; background:#ece9e3; margin:0 4px; }
.rl2-side{ border:1px solid #ece9e3; border-radius:10px; background:#fff; padding:18px 18px 14px; display:flex; flex-direction:column; gap:14px; }
.rl2-side-h{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid #ece9e3; }
.rl2-portrait{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; flex-shrink:0; }
.rl2-side-name{ font-weight:600; font-size:17px; letter-spacing:-.03em; color:#2b2a27; line-height:1.1; }
.rl2-side-meta{ font-family:'Manrope',sans-serif; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#94908a; margin-top:3px; }
.rl2-row{ padding:0 0 12px; border-bottom:1px solid #ece9e3; cursor:pointer; }
.rl2-row:last-of-type{ border-bottom:0; }
.rl2-row:hover .rl2-rname{ color:#c1684f; }
.rl2-rhead{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.rl2-rdot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.rl2-rname{ font-size:13.5px; font-weight:500; color:#2b2a27; letter-spacing:-.005em; }
.rl2-rkind{ margin-left:auto; font-family:'Manrope',sans-serif; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#94908a; padding:3px 7px; background:#faf8f4; border-radius:4px; }
.rl2-rnote{ margin:0 0 6px; font-size:13px; line-height:1.45; color:#605c55; }
.rl2-rmeta{ font-family:'Manrope',sans-serif; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#94908a; }
.rl2-add{ margin-top:4px; border:1px dashed #ddd9d1; border-radius:7px; padding:11px; background:transparent; color:#94908a; font-family:'Manrope',sans-serif; font-size:12.5px; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; width:100%; }
.rl2-add:hover{ border-color:#c1684f; color:#9a4a32; }
.rl2-add .material-symbols-outlined{ font-size:16px; }
.rl2-list{ border:1px solid #ece9e3; border-radius:10px; overflow:hidden; }
.rl2-lrow{ display:grid; grid-template-columns:1.1fr 28px 1.1fr 150px 1fr; align-items:center; gap:14px; padding:13px 18px; border-top:1px solid #ece9e3; font-size:13.5px; cursor:pointer; }
.rl2-lrow:first-child{ border-top:0; }
.rl2-lrow:hover{ background:#faf7f2; }
.rl2-lrow .who{ font-weight:500; letter-spacing:-.01em; display:flex; align-items:center; gap:8px; }
.rl2-lrow .who i{ width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.rl2-lrow .arrow{ color:#bdb9b2; text-align:center; }
.rl2-lrow .kind{ font-family:'Manrope',sans-serif; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:3px 8px; border-radius:4px; text-align:center; }
.rl2-lrow .note{ color:#605c55; font-size:12.5px; }
.rl2-empty{ padding:40px; text-align:center; color:#94908a; font-size:13.5px; }
.rl2-matrix-wrap{ border:1px solid #ece9e3; border-radius:10px; padding:18px; background:#fff; overflow-x:auto; }
.rl2-matrix{ border-collapse:collapse; font-family:'Manrope',sans-serif; }
.rl2-matrix th,.rl2-matrix td{ border:1px solid #ece9e3; text-align:center; }
.rl2-matrix th{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#94908a; font-weight:400; padding:8px 6px; }
.rl2-matrix th.rowh{ text-align:right; padding-right:12px; white-space:nowrap; }
.rl2-matrix td{ width:40px; height:40px; cursor:pointer; }
.rl2-matrix td .cell{ width:16px; height:16px; border-radius:5px; margin:auto; }
.rl2-matrix td.self{ background:#f4f1ec; }
.rl2-matrix td:hover{ background:#faf7f2; }
/* ── Relationships — DARK theme ── */
html.dark .rl2-eyebrow,html.dark .rl2-pinned,html.dark .rl2-flabel,html.dark .rl2-side-meta,html.dark .rl2-rkind,html.dark .rl2-rmeta,html.dark .rl2-lrow .kind ~ *,html.dark .rl2-matrix th{ color:#8b8e8c; }
html.dark .rl2-title,html.dark .rl2-side-name,html.dark .rl2-rname,html.dark .rl2-lrow .who{ color:#f2f0ed; }
html.dark .rl2-sub,html.dark .rl2-rnote,html.dark .rl2-lrow .note{ color:#b3b6b3; }
html.dark .rl2-seg,html.dark .rl2-chip,html.dark .rl2-leg,html.dark .rl2-graph,html.dark .rl2-side,html.dark .rl2-list,html.dark .rl2-matrix-wrap{ background:#2b2d2c; border-color:rgba(255,255,255,.10); }
html.dark .rl2-seg .s{ color:#8b8e8c; border-color:rgba(255,255,255,.10); }
html.dark .rl2-seg .s.active{ background:#f2f0ed; color:#262827; }
html.dark .rl2-filters{ background:#262827; border-color:rgba(255,255,255,.10); }
html.dark .rl2-chip{ color:#b3b6b3; }
html.dark .rl2-chip:hover{ border-color:rgba(255,255,255,.22); }
html.dark .rl2-chip.active{ background:#f2f0ed; color:#262827; border-color:#f2f0ed; }
html.dark .rl2-leg{ color:#b3b6b3; }
html.dark .rl2-zoom{ background:#2b2d2c; border-color:rgba(255,255,255,.10); }
html.dark .rl2-zb{ color:#b3b6b3; }
html.dark .rl2-zb:hover{ background:#333635; }
html.dark .rl2-zlevel{ color:#b3b6b3; }
html.dark .rl2-zsep{ background:rgba(255,255,255,.10); }
html.dark .rl2-corner{ color:#8b8e8c; }
html.dark .rl2-side-h,html.dark .rl2-row{ border-color:rgba(255,255,255,.10); }
html.dark .rl2-rkind,html.dark .rl2-matrix th,html.dark .rl2-matrix td{ border-color:rgba(255,255,255,.10); }
html.dark .rl2-rkind{ background:#333635; }
html.dark .rl2-lrow{ border-color:rgba(255,255,255,.10); }
html.dark .rl2-lrow:hover,html.dark .rl2-matrix td:hover{ background:#333635; }
html.dark .rl2-row:hover .rl2-rname{ color:#b4b4b4; }
html.dark .rl2-add{ border-color:rgba(255,255,255,.18); color:#8b8e8c; }
html.dark .rl2-add:hover{ border-color:#909090; color:#b4b4b4; }
html.dark .rl2-empty{ color:#8b8e8c; }
html.dark .rl2-matrix td.self{ background:#262827; }
/* ── Relationships — SEPIA theme ── */
html.theme-warm .rl2-eyebrow,html.theme-warm .rl2-pinned,html.theme-warm .rl2-flabel,html.theme-warm .rl2-side-meta,html.theme-warm .rl2-rmeta,html.theme-warm .rl2-matrix th{ color:#9a8d7e; }
html.theme-warm .rl2-title,html.theme-warm .rl2-side-name,html.theme-warm .rl2-rname,html.theme-warm .rl2-lrow .who{ color:#f0e7dd; }
html.theme-warm .rl2-sub,html.theme-warm .rl2-rnote,html.theme-warm .rl2-lrow .note{ color:#cabbac; }
html.theme-warm .rl2-seg,html.theme-warm .rl2-chip,html.theme-warm .rl2-leg,html.theme-warm .rl2-graph,html.theme-warm .rl2-side,html.theme-warm .rl2-list,html.theme-warm .rl2-matrix-wrap{ background:#2c2218; border-color:rgba(180,165,148,.18); }
html.theme-warm .rl2-seg .s{ color:#9a8d7e; border-color:rgba(180,165,148,.18); }
html.theme-warm .rl2-seg .s.active{ background:#e6ddd6; color:#241c16; }
html.theme-warm .rl2-filters{ background:#241c16; border-color:rgba(180,165,148,.18); }
html.theme-warm .rl2-chip{ color:#cabbac; }
html.theme-warm .rl2-chip:hover{ border-color:rgba(180,165,148,.35); }
html.theme-warm .rl2-chip.active{ background:#e6ddd6; color:#241c16; border-color:#e6ddd6; }
html.theme-warm .rl2-leg{ color:#cabbac; }
html.theme-warm .rl2-zoom{ background:#2c2218; border-color:rgba(180,165,148,.18); }
html.theme-warm .rl2-zb{ color:#cabbac; }
html.theme-warm .rl2-zb:hover{ background:#33271e; }
html.theme-warm .rl2-zlevel{ color:#cabbac; }
html.theme-warm .rl2-zsep{ background:rgba(180,165,148,.18); }
html.theme-warm .rl2-corner{ color:#9a8d7e; }
html.theme-warm .rl2-side-h,html.theme-warm .rl2-row,html.theme-warm .rl2-lrow,html.theme-warm .rl2-matrix th,html.theme-warm .rl2-matrix td{ border-color:rgba(180,165,148,.18); }
html.theme-warm .rl2-rkind{ background:#33271e; color:#9a8d7e; }
html.theme-warm .rl2-lrow:hover,html.theme-warm .rl2-matrix td:hover{ background:#33271e; }
html.theme-warm .rl2-row:hover .rl2-rname{ color:#e0a06f; }
html.theme-warm .rl2-add{ border-color:rgba(180,165,148,.3); color:#9a8d7e; }
html.theme-warm .rl2-add:hover{ border-color:#d4724a; color:#e0a06f; }
html.theme-warm .rl2-empty{ color:#9a8d7e; }
html.theme-warm .rl2-matrix td.self{ background:#241c16; }
/* ── Relationships — PORCELAIN theme (cool) ── */
html.theme-porcelain .rl2-eyebrow,html.theme-porcelain .rl2-pinned,html.theme-porcelain .rl2-flabel,html.theme-porcelain .rl2-side-meta,html.theme-porcelain .rl2-rmeta,html.theme-porcelain .rl2-matrix th{ color:#8a8f98; }
html.theme-porcelain .rl2-title,html.theme-porcelain .rl2-side-name,html.theme-porcelain .rl2-rname,html.theme-porcelain .rl2-lrow .who{ color:#2a2d33; }
html.theme-porcelain .rl2-sub,html.theme-porcelain .rl2-rnote,html.theme-porcelain .rl2-lrow .note{ color:#5b616b; }
html.theme-porcelain .rl2-seg,html.theme-porcelain .rl2-chip,html.theme-porcelain .rl2-leg,html.theme-porcelain .rl2-graph,html.theme-porcelain .rl2-side,html.theme-porcelain .rl2-list,html.theme-porcelain .rl2-matrix-wrap,html.theme-porcelain .rl2-zoom{ background:#ffffff; border-color:#dfe2e7; }
html.theme-porcelain .rl2-seg .s{ color:#8a8f98; border-color:#dfe2e7; }
html.theme-porcelain .rl2-seg .s.active{ background:#2a2d33; color:#fff; }
html.theme-porcelain .rl2-filters{ background:#f5f6f8; border-color:#dfe2e7; }
html.theme-porcelain .rl2-chip{ color:#5b616b; }
html.theme-porcelain .rl2-chip:hover{ border-color:#c5cad2; }
html.theme-porcelain .rl2-chip.active{ background:#2a2d33; color:#fff; border-color:#2a2d33; }
html.theme-porcelain .rl2-leg{ color:#5b616b; }
html.theme-porcelain .rl2-zb{ color:#5b616b; }
html.theme-porcelain .rl2-zb:hover{ background:#eceef2; }
html.theme-porcelain .rl2-zlevel{ color:#5b616b; }
html.theme-porcelain .rl2-zsep{ background:#dfe2e7; }
html.theme-porcelain .rl2-corner{ color:#8a8f98; }
html.theme-porcelain .rl2-side-h,html.theme-porcelain .rl2-row,html.theme-porcelain .rl2-lrow,html.theme-porcelain .rl2-matrix th,html.theme-porcelain .rl2-matrix td{ border-color:#dfe2e7; }
html.theme-porcelain .rl2-rkind{ background:#eceef2; color:#5b616b; }
html.theme-porcelain .rl2-lrow:hover,html.theme-porcelain .rl2-matrix td:hover{ background:#eceef2; }
html.theme-porcelain .rl2-row:hover .rl2-rname{ color:#5a6678; }
html.theme-porcelain .rl2-add{ border-color:#c5cad2; color:#8a8f98; }
html.theme-porcelain .rl2-add:hover{ border-color:#5a6678; color:#3a4654; }
html.theme-porcelain .rl2-empty{ color:#8a8f98; }
html.theme-porcelain .rl2-matrix td.self{ background:#f4f5f7; }
/* ============================================================
   VERSION HISTORY PANEL
   Slide-in panel (right side) that lists chapter snapshots,
   lets users preview read-only content, and restore old versions.
   Uses the same .panel infrastructure as DossierPanel / WikiDetailPanel.
   ============================================================ */
/* ── Layout shell ──────────────────────────────────────────── */
.vh-panel {
  display: flex;
  flex-direction: column;
  /* overflow-y is already set to auto by the base .panel rule;
     we override it here so only vh-list scrolls, not the whole panel. */
  overflow-y: hidden;
}
/* ── Header ─────────────────────────────────────────────────── */
.vh-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 12px 13px 8px;
  border-bottom: 1px solid #ece9e3;
  background: #ffffff;
  flex-shrink: 0;
  /* Stays pinned while the list scrolls */
  position: sticky;
  top: 0;
  z-index: 1;
}
.vh-header-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.vh-header-title {
  font-family: Manrope, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #2b2a27;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vh-header-sub {
  font-family: Manrope, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8b8986;
}
/* ── Icon buttons (close / back / edit / delete / check) ────── */
.vh-icon-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #6b6963;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.vh-icon-btn:hover { background: #f0ece4; color: #2b2a27; }
.vh-icon-btn .material-symbols-outlined { font-size: 18px; }
.vh-icon-btn--danger       { color: #b3261e; }
.vh-icon-btn--danger:hover { background: rgba(179, 38, 30, 0.08); color: #b3261e; }
/* ── Text / action buttons ──────────────────────────────────── */
.vh-action-btn {
  font-family: Manrope, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6963;
  background: transparent;
  border: 1px solid #ece9e3;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.vh-action-btn:hover { border-color: #c1684f; color: #c1684f; }
.vh-action-btn--primary {
  background: #c1684f;
  border-color: #c1684f;
  color: #ffffff;
}
.vh-action-btn--primary:hover { opacity: 0.85; color: #ffffff; }
/* ── Inline text inputs (save-name & rename) ────────────────── */
.vh-name-input,
.vh-inline-input {
  background: #f4f1ec;
  border: 1px solid #ddd9d1;
  border-radius: 6px;
  padding: 5px 8px;
  font-family: Manrope, sans-serif;
  font-size: 12px;
  color: #2b2a27;
  outline: none;
  transition: border-color 0.15s;
}
.vh-name-input:focus,
.vh-inline-input:focus { border-color: #c1684f; }
.vh-name-input  { flex: 1; min-width: 0; }
.vh-inline-input { width: 110px; }
/* ── Scrollable list body ───────────────────────────────────── */
.vh-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Extra bottom padding so last item clears the mobile bottom nav */
  padding-bottom: calc(80px + max(0px, env(safe-area-inset-bottom)));
}
/* ── Empty state ────────────────────────────────────────────── */
.vh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 52px 28px 40px;
  text-align: center;
}
.vh-empty-icon {
  font-size: 42px !important;
  color: #ccc8c2;
}
.vh-empty-title {
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2b2a27;
  margin: 0;
}
.vh-empty-sub {
  font-family: Manrope, sans-serif;
  font-size: 12px;
  color: #8b8986;
  line-height: 1.6;
  margin: 0;
  max-width: 280px;
}
/* ── Day group ──────────────────────────────────────────────── */
.vh-group { border-bottom: 1px solid #f0ece4; }
.vh-group:last-child { border-bottom: none; }
.vh-group-label {
  font-family: Manrope, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b8986;
  padding: 10px 16px 4px;
}
/* ── Snapshot row ───────────────────────────────────────────── */
.vh-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 0;
  border-bottom: 1px solid #f5f2ee;
  min-height: 52px;
  transition: background 0.12s;
}
.vh-row:last-child { border-bottom: none; }
.vh-row:hover { background: #faf7f2; }
.vh-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 4px 10px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}
.vh-row-name {
  font-family: Manrope, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #2b2a27;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.vh-row-time {
  font-family: Manrope, sans-serif;
  font-size: 11px;
  color: #8b8986;
  letter-spacing: 0.02em;
}
.vh-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
/* ── Read-only preview pane ─────────────────────────────────── */
.vh-preview {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 32px calc(80px + max(0px, env(safe-area-inset-bottom)));
  /* Prose styles matching the Write editor's appearance */
  font-size: 15px;
  line-height: 1.8;
  color: #2b2a27;
}
.vh-preview div { margin: 0 0 0.9em; }
.vh-preview div:last-child { margin-bottom: 0; }
.vh-preview b  { font-weight: 700; }
.vh-preview i  { font-style: italic; }
.vh-preview s  { text-decoration: line-through; }
.vh-preview .md-scene-break {
  text-align: center;
  color: #8b8986;
  margin: 1.5em 0;
  letter-spacing: 0.3em;
}
.vh-preview .md-quote {
  border-left: 3px solid #ddd9d1;
  margin: 1em 0;
  padding: 2px 0 2px 16px;
  font-style: italic;
  color: #4b4947;
}
.vh-preview .md-h1 {
  font-family: Manrope, sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 0.4em;
  font-style: normal;
}
/* ── Dark mode ──────────────────────────────────────────────── */
html.dark #panel-version-history  { background: #2e3130; }
html.dark .vh-header               { background: #2e3130; border-color: rgba(255,255,255,.08); }
html.dark .vh-header-title         { color: #f2f0ed; }
html.dark .vh-header-sub           { color: #7a7876; }
html.dark .vh-icon-btn             { color: #8b8986; }
html.dark .vh-icon-btn:hover       { background: rgba(255,255,255,.08); color: #f2f0ed; }
html.dark .vh-icon-btn--danger     { color: #f2b8b5; }
html.dark .vh-icon-btn--danger:hover { background: rgba(242,184,181,.12); }
html.dark .vh-action-btn           { border-color: rgba(255,255,255,.14); color: #8b8986; }
html.dark .vh-action-btn:hover     { border-color: #b4b4b4; color: #b4b4b4; }
html.dark .vh-action-btn--primary  { background: #6e6e6e; border-color: #6e6e6e; color: #f2f0ed; }
html.dark .vh-action-btn--primary:hover { opacity: 0.85; }
html.dark .vh-name-input,
html.dark .vh-inline-input         { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #f2f0ed; }
html.dark .vh-name-input:focus,
html.dark .vh-inline-input:focus   { border-color: #909090; }
html.dark .vh-group                { border-color: rgba(255,255,255,.05); }
html.dark .vh-group-label          { color: #6b6967; }
html.dark .vh-row                  { border-color: rgba(255,255,255,.05); }
html.dark .vh-row:hover            { background: rgba(255,255,255,.04); }
html.dark .vh-row-name             { color: #f2f0ed; }
html.dark .vh-row-time             { color: #7a7876; }
html.dark .vh-empty-icon           { color: #3e3c3b; }
html.dark .vh-empty-title          { color: #c8c5c2; }
html.dark .vh-empty-sub            { color: #6b6967; }
html.dark .vh-preview              { color: #e4e1de; }
html.dark .vh-preview .md-quote    { border-color: rgba(255,255,255,.15); color: #a8a5a2; }
html.dark .vh-preview .md-h1       { color: #f2f0ed; }
/* ── Sepia / warm theme ─────────────────────────────────────── */
html.theme-warm #panel-version-history { background: #281f19; }
html.theme-warm .vh-header             { background: #281f19; border-color: rgba(255,255,255,.08); }
html.theme-warm .vh-header-title       { color: #e6ddd6; }
html.theme-warm .vh-row:hover          { background: rgba(255,255,255,.04); }
html.theme-warm .vh-row-name           { color: #e6ddd6; }
html.theme-warm .vh-preview            { color: #e6ddd6; }
/* ── Porcelain theme ────────────────────────────────────────── */
html.theme-porcelain .vh-action-btn:hover     { border-color: #5a6678; color: #5a6678; }
html.theme-porcelain .vh-action-btn--primary  { background: #5a6678; border-color: #5a6678; }
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x:  ; --tw-pan-y:  ; --tw-pinch-zoom:  ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position:  ; --tw-gradient-via-position:  ; --tw-gradient-to-position:  ; --tw-ordinal:  ; --tw-slashed-zero:  ; --tw-numeric-figure:  ; --tw-numeric-spacing:  ; --tw-numeric-fraction:  ; --tw-ring-inset:  ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur:  ; --tw-brightness:  ; --tw-contrast:  ; --tw-grayscale:  ; --tw-hue-rotate:  ; --tw-invert:  ; --tw-saturate:  ; --tw-sepia:  ; --tw-drop-shadow:  ; --tw-backdrop-blur:  ; --tw-backdrop-brightness:  ; --tw-backdrop-contrast:  ; --tw-backdrop-grayscale:  ; --tw-backdrop-hue-rotate:  ; --tw-backdrop-invert:  ; --tw-backdrop-opacity:  ; --tw-backdrop-saturate:  ; --tw-backdrop-sepia:  ; --tw-contain-size:  ; --tw-contain-layout:  ; --tw-contain-paint:  ; --tw-contain-style:  ; }
::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x:  ; --tw-pan-y:  ; --tw-pinch-zoom:  ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position:  ; --tw-gradient-via-position:  ; --tw-gradient-to-position:  ; --tw-ordinal:  ; --tw-slashed-zero:  ; --tw-numeric-figure:  ; --tw-numeric-spacing:  ; --tw-numeric-fraction:  ; --tw-ring-inset:  ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur:  ; --tw-brightness:  ; --tw-contrast:  ; --tw-grayscale:  ; --tw-hue-rotate:  ; --tw-invert:  ; --tw-saturate:  ; --tw-sepia:  ; --tw-drop-shadow:  ; --tw-backdrop-blur:  ; --tw-backdrop-brightness:  ; --tw-backdrop-contrast:  ; --tw-backdrop-grayscale:  ; --tw-backdrop-hue-rotate:  ; --tw-backdrop-invert:  ; --tw-backdrop-opacity:  ; --tw-backdrop-saturate:  ; --tw-backdrop-sepia:  ; --tw-contain-size:  ; --tw-contain-layout:  ; --tw-contain-paint:  ; --tw-contain-style:  ; }
/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border-color: #6b7280; border-width: 1px; border-radius: 0px; padding-top: 0.5rem; padding-right: 0.75rem; padding-bottom: 0.5rem; padding-left: 0.75rem; font-size: 1rem; line-height: 1.5rem; --tw-shadow: 0 0 #0000; }
[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-color: #2563eb; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #6b7280; opacity: 1; }
input::placeholder,textarea::placeholder { color: #6b7280; opacity: 1; }
::-webkit-datetime-edit-fields-wrapper { padding: 0; }
::-webkit-date-and-time-value { min-height: 1.5em; text-align: inherit; }
::-webkit-datetime-edit { display: inline-flex; }
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0; }
select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
[multiple],[size]:where(select:not([size="1"])) { background-image: initial; background-position: initial; background-repeat: unset; background-size: initial; padding-right: 0.75rem; -webkit-print-color-adjust: unset; print-color-adjust: unset; }
[type='checkbox'],[type='radio'] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem; color: #2563eb; background-color: #fff; border-color: #6b7280; border-width: 1px; --tw-shadow: 0 0 #0000; }
[type='checkbox'] { border-radius: 0px; }
[type='radio'] { border-radius: 100%; }
[type='checkbox']:focus,[type='radio']:focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }
[type='checkbox']:checked,[type='radio']:checked { border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
[type='checkbox']:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); }
@media (forced-colors: active)  {
 [type='checkbox']:checked { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } }
[type='radio']:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); }
@media (forced-colors: active)  {
 [type='radio']:checked { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } }
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus { border-color: transparent; background-color: currentColor; }
[type='checkbox']:indeterminate { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
@media (forced-colors: active)  {
 [type='checkbox']:indeterminate { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } }
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus { border-color: transparent; background-color: currentColor; }
[type='file'] { background: unset; border-color: inherit; border-width: 0; border-radius: 0; padding: 0; font-size: unset; line-height: inherit; }
[type='file']:focus { outline: 1px solid ButtonText; outline: 1px auto -webkit-focus-ring-color; }
.container { width: 100%; }
@media (min-width: 640px) {
 .container { max-width: 640px; } }
@media (min-width: 768px) {
 .container { max-width: 768px; } }
@media (min-width: 1024px) {
 .container { max-width: 1024px; } }
@media (min-width: 1280px) {
 .container { max-width: 1280px; } }
@media (min-width: 1536px) {
 .container { max-width: 1536px; } }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.collapse { visibility: collapse; }
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.inset-0 { inset: 0px; }
.-left-1 { left: -0.25rem; }
.-top-3 { top: -0.75rem; }
.bottom-0 { bottom: 0px; }
.bottom-1 { bottom: 0.25rem; }
.bottom-1\.5 { bottom: 0.375rem; }
.bottom-8 { bottom: 2rem; }
.left-0 { left: 0px; }
.left-1\/2 { left: 50%; }
.left-2 { left: 0.5rem; }
.right-0 { right: 0px; }
.right-1 { right: 0.25rem; }
.right-1\.5 { right: 0.375rem; }
.right-2 { right: 0.5rem; }
.right-6 { right: 1.5rem; }
.top-0 { top: 0px; }
.top-1\.5 { top: 0.375rem; }
.top-1\/2 { top: 50%; }
.top-2 { top: 0.5rem; }
.top-3 { top: 0.75rem; }
.top-32 { top: 8rem; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-\[2\] { z-index: 2; }
.z-\[55\] { z-index: 55; }
.z-\[80\] { z-index: 80; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-full { grid-column: 1 / -1; }
.float-left { float: left; }
.-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }
.-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
.-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.mx-0\.5 { margin-left: 0.125rem; margin-right: 0.125rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.-mb-4 { margin-bottom: -1rem; }
.-mr-1 { margin-right: -0.25rem; }
.mb-0 { margin-bottom: 0px; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-0\.5 { margin-left: 0.125rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-8 { margin-left: 2rem; }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: 0.5rem; }
.mt-0 { margin-top: 0px; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-auto { margin-top: auto; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.table { display: table; }
.\!grid { display: grid !important; }
.grid { display: grid; }
.contents { display: contents; }
.\!hidden { display: none !important; }
.hidden { display: none; }
.aspect-\[2\/3\] { aspect-ratio: 2/3; }
.h-0\.5 { height: 0.125rem; }
.h-1 { height: 0.25rem; }
.h-1\.5 { height: 0.375rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-2\.5 { height: 0.625rem; }
.h-20 { height: 5rem; }
.h-3\.5 { height: 0.875rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-\[1px\] { height: 1px; }
.h-\[26px\] { height: 26px; }
.h-full { height: 100%; }
.h-px { height: 1px; }
.max-h-56 { max-height: 14rem; }
.max-h-72 { max-height: 18rem; }
.min-h-\[42px\] { min-height: 42px; }
.min-h-\[48px\] { min-height: 48px; }
.min-h-\[500px\] { min-height: 500px; }
.min-h-\[600px\] { min-height: 600px; }
.min-h-screen { min-height: 100vh; }
.w-1 { width: 0.25rem; }
.w-1\.5 { width: 0.375rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-2 { width: 0.5rem; }
.w-2\.5 { width: 0.625rem; }
.w-20 { width: 5rem; }
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-\[26px\] { width: 26px; }
.w-fit { width: -moz-fit-content; width: fit-content; }
.w-full { width: 100%; }
.w-px { width: 1px; }
.min-w-0 { min-width: 0px; }
.min-w-\[120px\] { min-width: 120px; }
.min-w-\[36px\] { min-width: 36px; }
.min-w-\[38px\] { min-width: 38px; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-\[1050px\] { max-width: 1050px; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }
.grow { flex-grow: 1; }
.-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-x-1 { --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
@keyframes spin {
 to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
.cursor-pointer { cursor: pointer; }
.cursor-text { cursor: text; }
.cursor-zoom-in { cursor: zoom-in; }
.touch-manipulation { touch-action: manipulation; }
.select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.resize-none { resize: none; }
.resize { resize: both; }
.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.columns-1 { -moz-columns: 1; columns: 1; }
.columns-2 { -moz-columns: 2; columns: 2; }
.break-inside-avoid { -moz-column-break-inside: avoid; break-inside: avoid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-0 { gap: 0px; }
.gap-0\.5 { gap: 0.125rem; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-16 { gap: 4rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-\[9px\] { gap: 9px; }
.gap-x-4 { -moz-column-gap: 1rem; column-gap: 1rem; }
.gap-x-5 { -moz-column-gap: 1.25rem; column-gap: 1.25rem; }
.gap-y-9 { row-gap: 2.25rem; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); }
.space-y-10 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2.5rem * var(--tw-space-y-reverse)); }
.space-y-12 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(3rem * var(--tw-space-y-reverse)); }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); }
.self-start { align-self: flex-start; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.rounded { border-radius: 0.125rem; }
.rounded-full { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-sm { border-radius: 0.125rem; }
.rounded-xl { border-radius: 0.5rem; }
.border { border-width: 1px; }
.border-0 { border-width: 0px; }
.border-2 { border-width: 2px; }
.border-b { border-bottom-width: 1px; }
.border-l-2 { border-left-width: 2px; }
.border-t { border-top-width: 1px; }
.border-dashed { border-style: dashed; }
.border-none { border-style: none; }
.border-\[\#e8e4de\] { --tw-border-opacity: 1; border-color: rgb(232 228 222 / var(--tw-border-opacity, 1)); }
.border-error\/30 { border-color: rgb(177 30 30 / 0.3); }
.border-gray-200\/20 { border-color: rgb(229 231 235 / 0.2); }
.border-gray-200\/30 { border-color: rgb(229 231 235 / 0.3); }
.border-outline-variant { --tw-border-opacity: 1; border-color: rgb(221 217 209 / var(--tw-border-opacity, 1)); }
.border-outline-variant\/10 { border-color: rgb(221 217 209 / 0.1); }
.border-outline-variant\/15 { border-color: rgb(221 217 209 / 0.15); }
.border-outline-variant\/20 { border-color: rgb(221 217 209 / 0.2); }
.border-outline-variant\/30 { border-color: rgb(221 217 209 / 0.3); }
.border-outline-variant\/40 { border-color: rgb(221 217 209 / 0.4); }
.border-outline-variant\/50 { border-color: rgb(221 217 209 / 0.5); }
.border-primary { --tw-border-opacity: 1; border-color: rgb(43 42 39 / var(--tw-border-opacity, 1)); }
.border-primary-container { --tw-border-opacity: 1; border-color: rgb(193 104 79 / var(--tw-border-opacity, 1)); }
.border-primary-container\/20 { border-color: rgb(193 104 79 / 0.2); }
.border-primary\/20 { border-color: rgb(43 42 39 / 0.2); }
.border-primary\/30 { border-color: rgb(43 42 39 / 0.3); }
.border-primary\/40 { border-color: rgb(43 42 39 / 0.4); }
.border-transparent { border-color: transparent; }
.bg-\[\#ffffff\] { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-\[\#ffffff\]\/90 { background-color: rgb(255 255 255 / 0.9); }
.bg-\[\#ffffff\]\/95 { background-color: rgb(255 255 255 / 0.95); }
.bg-amber-100 { --tw-bg-opacity: 1; background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1)); }
.bg-amber-900 { --tw-bg-opacity: 1; background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1)); }
.bg-black\/0 { background-color: rgb(0 0 0 / 0); }
.bg-black\/45 { background-color: rgb(0 0 0 / 0.45); }
.bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }
.bg-black\/60 { background-color: rgb(0 0 0 / 0.6); }
.bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); }
.bg-blue-900 { --tw-bg-opacity: 1; background-color: rgb(30 58 138 / var(--tw-bg-opacity, 1)); }
.bg-error-container { --tw-bg-opacity: 1; background-color: rgb(253 219 215 / var(--tw-bg-opacity, 1)); }
.bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); }
.bg-green-100 { --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); }
.bg-green-900 { --tw-bg-opacity: 1; background-color: rgb(20 83 45 / var(--tw-bg-opacity, 1)); }
.bg-outline-variant { --tw-bg-opacity: 1; background-color: rgb(221 217 209 / var(--tw-bg-opacity, 1)); }
.bg-outline-variant\/15 { background-color: rgb(221 217 209 / 0.15); }
.bg-outline-variant\/20 { background-color: rgb(221 217 209 / 0.2); }
.bg-outline-variant\/25 { background-color: rgb(221 217 209 / 0.25); }
.bg-outline-variant\/30 { background-color: rgb(221 217 209 / 0.3); }
.bg-primary { --tw-bg-opacity: 1; background-color: rgb(43 42 39 / var(--tw-bg-opacity, 1)); }
.bg-primary-container { --tw-bg-opacity: 1; background-color: rgb(193 104 79 / var(--tw-bg-opacity, 1)); }
.bg-primary\/10 { background-color: rgb(43 42 39 / 0.1); }
.bg-primary\/5 { background-color: rgb(43 42 39 / 0.05); }
.bg-primary\/\[0\.06\] { background-color: rgb(43 42 39 / 0.06); }
.bg-purple-100 { --tw-bg-opacity: 1; background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1)); }
.bg-purple-900 { --tw-bg-opacity: 1; background-color: rgb(88 28 135 / var(--tw-bg-opacity, 1)); }
.bg-secondary-container { --tw-bg-opacity: 1; background-color: rgb(241 237 229 / var(--tw-bg-opacity, 1)); }
.bg-surface { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-surface-container { --tw-bg-opacity: 1; background-color: rgb(244 241 236 / var(--tw-bg-opacity, 1)); }
.bg-surface-container-high { --tw-bg-opacity: 1; background-color: rgb(236 233 227 / var(--tw-bg-opacity, 1)); }
.bg-surface-container-highest { --tw-bg-opacity: 1; background-color: rgb(231 227 219 / var(--tw-bg-opacity, 1)); }
.bg-surface-container-low { --tw-bg-opacity: 1; background-color: rgb(250 247 242 / var(--tw-bg-opacity, 1)); }
.bg-surface-container-lowest { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-tertiary-fixed { --tw-bg-opacity: 1; background-color: rgb(243 236 223 / var(--tw-bg-opacity, 1)); }
.bg-transparent { background-color: transparent; }
.bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-white\/40 { background-color: rgb(255 255 255 / 0.4); }
.object-cover { -o-object-fit: cover; object-fit: cover; }
.object-center { -o-object-position: center; object-position: center; }
.p-0 { padding: 0px; }
.p-0\.5 { padding: 0.125rem; }
.p-1 { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.p-12 { padding: 3rem; }
.p-2 { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.py-\[10px\] { padding-top: 10px; padding-bottom: 10px; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-24 { padding-bottom: 6rem; }
.pb-28 { padding-bottom: 7rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-32 { padding-bottom: 8rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }
.pl-8 { padding-left: 2rem; }
.pr-16 { padding-right: 4rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-8 { padding-right: 2rem; }
.pt-0\.5 { padding-top: 0.125rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-12 { padding-top: 3rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-2\.5 { padding-top: 0.625rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.font-\[\'Manrope\'\] { font-family: 'Manrope'; }
.font-body { font-family: Geist, Inter, sans-serif; }
.font-headline { font-family: Geist, Manrope, sans-serif; }
.font-label { font-family: Geist, Manrope, sans-serif; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15\.5px\] { font-size: 15.5px; }
.text-\[15px\] { font-size: 15px; }
.text-\[2\.1rem\] { font-size: 2.1rem; }
.text-\[9px\] { font-size: 9px; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.font-black { font-weight: 900; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.uppercase { text-transform: uppercase; }
.normal-case { text-transform: none; }
.italic { font-style: italic; }
.tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); }
.leading-\[1\.1\] { line-height: 1.1; }
.leading-\[1\.85\] { line-height: 1.85; }
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.leading-snug { line-height: 1.375; }
.leading-tight { line-height: 1.25; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.tracking-\[0\.3em\] { letter-spacing: 0.3em; }
.tracking-normal { letter-spacing: 0em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.text-amber-300 { --tw-text-opacity: 1; color: rgb(252 211 77 / var(--tw-text-opacity, 1)); }
.text-amber-700 { --tw-text-opacity: 1; color: rgb(180 83 9 / var(--tw-text-opacity, 1)); }
.text-blue-300 { --tw-text-opacity: 1; color: rgb(147 197 253 / var(--tw-text-opacity, 1)); }
.text-blue-700 { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity, 1)); }
.text-error { --tw-text-opacity: 1; color: rgb(177 30 30 / var(--tw-text-opacity, 1)); }
.text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); }
.text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); }
.text-green-300 { --tw-text-opacity: 1; color: rgb(134 239 172 / var(--tw-text-opacity, 1)); }
.text-green-700 { --tw-text-opacity: 1; color: rgb(21 128 61 / var(--tw-text-opacity, 1)); }
.text-green-800 { --tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity, 1)); }
.text-on-primary { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.text-on-secondary-container { --tw-text-opacity: 1; color: rgb(101 100 100 / var(--tw-text-opacity, 1)); }
.text-on-surface { --tw-text-opacity: 1; color: rgb(43 42 39 / var(--tw-text-opacity, 1)); }
.text-on-surface-variant { --tw-text-opacity: 1; color: rgb(96 92 85 / var(--tw-text-opacity, 1)); }
.text-on-surface-variant\/20 { color: rgb(96 92 85 / 0.2); }
.text-on-surface-variant\/40 { color: rgb(96 92 85 / 0.4); }
.text-on-surface-variant\/50 { color: rgb(96 92 85 / 0.5); }
.text-on-surface-variant\/60 { color: rgb(96 92 85 / 0.6); }
.text-on-surface-variant\/70 { color: rgb(96 92 85 / 0.7); }
.text-on-surface-variant\/80 { color: rgb(96 92 85 / 0.8); }
.text-on-surface\/90 { color: rgb(43 42 39 / 0.9); }
.text-on-tertiary-fixed-variant { --tw-text-opacity: 1; color: rgb(122 94 47 / var(--tw-text-opacity, 1)); }
.text-outline { --tw-text-opacity: 1; color: rgb(148 144 138 / var(--tw-text-opacity, 1)); }
.text-outline-variant { --tw-text-opacity: 1; color: rgb(221 217 209 / var(--tw-text-opacity, 1)); }
.text-outline-variant\/40 { color: rgb(221 217 209 / 0.4); }
.text-outline-variant\/50 { color: rgb(221 217 209 / 0.5); }
.text-primary { --tw-text-opacity: 1; color: rgb(43 42 39 / var(--tw-text-opacity, 1)); }
.text-purple-300 { --tw-text-opacity: 1; color: rgb(216 180 254 / var(--tw-text-opacity, 1)); }
.text-purple-700 { --tw-text-opacity: 1; color: rgb(126 34 206 / var(--tw-text-opacity, 1)); }
.text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.text-white\/80 { color: rgb(255 255 255 / 0.8); }
.text-white\/85 { color: rgb(255 255 255 / 0.85); }
.underline { text-decoration-line: underline; }
.line-through { text-decoration-line: line-through; }
.accent-primary { accent-color: #2b2a27; }
.opacity-0 { opacity: 0; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-\[0_-4px_32px_rgba\(43\2c 42\2c 39\2c 0\.04\)\] { --tw-shadow: 0 -4px 32px rgba(43,42,39,0.04); --tw-shadow-colored: 0 -4px 32px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-\[0_2px_10px_rgba\(43\2c 42\2c 39\2c 0\.12\)\] { --tw-shadow: 0 2px 10px rgba(43,42,39,0.12); --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-\[0_2px_12px_rgba\(43\2c 42\2c 39\2c 0\.04\)\] { --tw-shadow: 0 2px 12px rgba(43,42,39,0.04); --tw-shadow-colored: 0 2px 12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-\[0_32px_64px_-12px_rgba\(43\2c 42\2c 39\2c 0\.08\)\] { --tw-shadow: 0 32px 64px -12px rgba(43,42,39,0.08); --tw-shadow-colored: 0 32px 64px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-\[0_4px_24px_rgba\(43\2c 42\2c 39\2c 0\.12\)\] { --tw-shadow: 0 4px 24px rgba(43,42,39,0.12); --tw-shadow-colored: 0 4px 24px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.outline { outline-style: solid; }
.ring-2 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-4 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.sepia { --tw-sepia: sepia(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.backdrop-blur-md { --tw-backdrop-blur: blur(12px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.backdrop-blur-xl { --tw-backdrop-blur: blur(24px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-700 { transition-duration: 700ms; }
.\[-moz-appearance\:textfield\] { -moz-appearance: textfield; }
.placeholder\:text-on-surface-variant\/40::-moz-placeholder { color: rgb(96 92 85 / 0.4); }
.placeholder\:text-on-surface-variant\/40::placeholder { color: rgb(96 92 85 / 0.4); }
.placeholder\:text-outline-variant\/50::-moz-placeholder { color: rgb(221 217 209 / 0.5); }
.placeholder\:text-outline-variant\/50::placeholder { color: rgb(221 217 209 / 0.5); }
.last\:border-0:last-child { border-width: 0px; }
.focus-within\:border-primary:focus-within { --tw-border-opacity: 1; border-color: rgb(43 42 39 / var(--tw-border-opacity, 1)); }
.hover\:gap-2:hover { gap: 0.5rem; }
.hover\:border-outline-variant\/70:hover { border-color: rgb(221 217 209 / 0.7); }
.hover\:border-outline\/40:hover { border-color: rgb(148 144 138 / 0.4); }
.hover\:border-primary:hover { --tw-border-opacity: 1; border-color: rgb(43 42 39 / var(--tw-border-opacity, 1)); }
.hover\:border-primary\/30:hover { border-color: rgb(43 42 39 / 0.3); }
.hover\:border-primary\/40:hover { border-color: rgb(43 42 39 / 0.4); }
.hover\:border-primary\/50:hover { border-color: rgb(43 42 39 / 0.5); }
.hover\:bg-\[\#faf7f2\]:hover { --tw-bg-opacity: 1; background-color: rgb(250 247 242 / var(--tw-bg-opacity, 1)); }
.hover\:bg-error-container:hover { --tw-bg-opacity: 1; background-color: rgb(253 219 215 / var(--tw-bg-opacity, 1)); }
.hover\:bg-error\/5:hover { background-color: rgb(177 30 30 / 0.05); }
.hover\:bg-primary-container:hover { --tw-bg-opacity: 1; background-color: rgb(193 104 79 / var(--tw-bg-opacity, 1)); }
.hover\:bg-surface-container:hover { --tw-bg-opacity: 1; background-color: rgb(244 241 236 / var(--tw-bg-opacity, 1)); }
.hover\:bg-surface-container-high:hover { --tw-bg-opacity: 1; background-color: rgb(236 233 227 / var(--tw-bg-opacity, 1)); }
.hover\:bg-surface-container-highest:hover { --tw-bg-opacity: 1; background-color: rgb(231 227 219 / var(--tw-bg-opacity, 1)); }
.hover\:bg-surface-container-low:hover { --tw-bg-opacity: 1; background-color: rgb(250 247 242 / var(--tw-bg-opacity, 1)); }
.hover\:text-error:hover { --tw-text-opacity: 1; color: rgb(177 30 30 / var(--tw-text-opacity, 1)); }
.hover\:text-on-surface:hover { --tw-text-opacity: 1; color: rgb(43 42 39 / var(--tw-text-opacity, 1)); }
.hover\:text-on-surface-variant:hover { --tw-text-opacity: 1; color: rgb(96 92 85 / var(--tw-text-opacity, 1)); }
.hover\:text-primary:hover { --tw-text-opacity: 1; color: rgb(43 42 39 / var(--tw-text-opacity, 1)); }
.hover\:text-red-600:hover { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)); }
.hover\:underline:hover { text-decoration-line: underline; }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:opacity-70:hover { opacity: 0.7; }
.hover\:opacity-90:hover { opacity: 0.9; }
.focus\:border-primary:focus { --tw-border-opacity: 1; border-color: rgb(43 42 39 / var(--tw-border-opacity, 1)); }
.focus\:border-primary\/50:focus { border-color: rgb(43 42 39 / 0.5); }
.focus\:opacity-100:focus { opacity: 1; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-0:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.active\:scale-90:active { --tw-scale-x: .9; --tw-scale-y: .9; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.active\:scale-95:active { --tw-scale-x: .95; --tw-scale-y: .95; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.active\:scale-\[0\.98\]:active { --tw-scale-x: 0.98; --tw-scale-y: 0.98; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.active\:scale-\[0\.99\]:active { --tw-scale-x: 0.99; --tw-scale-y: 0.99; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.active\:opacity-70:active { opacity: 0.7; }
.disabled\:cursor-default:disabled { cursor: default; }
.disabled\:opacity-30:disabled { opacity: 0.3; }
.disabled\:opacity-40:disabled { opacity: 0.4; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:active\:scale-100:active:disabled { --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group:hover .group-hover\:rotate-90 { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group:hover .group-hover\:scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group:hover .group-hover\:gap-4 { gap: 1rem; }
.group:hover .group-hover\:bg-black\/20 { background-color: rgb(0 0 0 / 0.2); }
.group:hover .group-hover\:bg-primary\/15 { background-color: rgb(43 42 39 / 0.15); }
.group:hover .group-hover\:text-primary { --tw-text-opacity: 1; color: rgb(43 42 39 / var(--tw-text-opacity, 1)); }
.group:hover .group-hover\:underline { text-decoration-line: underline; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:shadow-\[0_10px_24px_rgba\(43\2c 42\2c 39\2c 0\.20\)\] { --tw-shadow: 0 10px 24px rgba(43,42,39,0.20); --tw-shadow-colored: 0 10px 24px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
@media (min-width: 640px) {
 .sm\:inline { display: inline; }
 .sm\:columns-2 { -moz-columns: 2; columns: 2; }
 .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .sm\:px-12 { padding-left: 3rem; padding-right: 3rem; }
 .sm\:py-11 { padding-top: 2.75rem; padding-bottom: 2.75rem; } }
@media (min-width: 768px) {
 .md\:col-span-12 { grid-column: span 12 / span 12; }
 .md\:col-span-4 { grid-column: span 4 / span 4; }
 .md\:col-span-8 { grid-column: span 8 / span 8; }
 .md\:block { display: block; }
 .md\:inline { display: inline; }
 .md\:flex { display: flex; }
 .md\:grid { display: grid; }
 .md\:contents { display: contents; }
 .md\:hidden { display: none; }
 .md\:max-w-4xl { max-width: 56rem; }
 .md\:max-w-5xl { max-width: 64rem; }
 .md\:max-w-xs { max-width: 20rem; }
 .md\:columns-3 { -moz-columns: 3; columns: 3; }
 .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
 .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .md\:flex-row { flex-direction: row; }
 .md\:items-start { align-items: flex-start; }
 .md\:items-end { align-items: flex-end; }
 .md\:items-center { align-items: center; }
 .md\:gap-1 { gap: 0.25rem; }
 .md\:gap-10 { gap: 2.5rem; }
 .md\:gap-5 { gap: 1.25rem; }
 .md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
 .md\:px-16 { padding-left: 4rem; padding-right: 4rem; }
 .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
 .md\:py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
 .md\:pt-8 { padding-top: 2rem; }
 .md\:hover\:border-l-2:hover { border-left-width: 2px; }
 .md\:hover\:border-primary\/40:hover { border-color: rgb(43 42 39 / 0.4); }
 .md\:hover\:bg-primary\/\[0\.04\]:hover { background-color: rgb(43 42 39 / 0.04); }
 .md\:hover\:pl-1:hover { padding-left: 0.25rem; }
 .group:hover .md\:group-hover\:h-3\.5 { height: 0.875rem; }
 .group:hover .md\:group-hover\:w-3\.5 { width: 0.875rem; }
 .group:hover .md\:group-hover\:ring-4 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } }
@media (min-width: 1024px) {
 .lg\:col-span-5 { grid-column: span 5 / span 5; }
 .lg\:col-span-7 { grid-column: span 7 / span 7; }
 .lg\:columns-4 { -moz-columns: 4; columns: 4; }
 .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
 .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .lg\:p-20 { padding: 5rem; }
 .lg\:px-24 { padding-left: 6rem; padding-right: 6rem; } }
.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; }
.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; }
@media(hover:hover) {
 .group:hover .\[\@media\(hover\:hover\)\]\:group-hover\:-translate-y-0\.5 { --tw-translate-y: -0.125rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } }