ouatis_obsidian-scriptorium/theme.css

/* =====================================================================
   SCRIPTORIUM CSS Theme for Obsidian
   
   Designed for Obsidian with a focus on readability and elegant visual experience.
   
   Acknowledgments:
   - Inspired by [Sanctum](https://github.com/jdanielmourao/obsidian-sanctum) by @jdanielmourao.

   Module Map:
   [01] Design Tokens
   [02] Shadows & Theme Colors
   [03] Theme Mapping
   [04] App Canvas & Global Semantics
   [05] Workspace Tokens & Typography
   [06] Markdown Layout
   [07] Markdown Elements
        [07a] Tables
        [07b] Code Styles
        [07c] Lists
        [07d] Highlights
        [07e] Links
        [07f] Blockquotes
        [07g] Horizontal Rules
        [07h] Tags
        [07i] Native Properties
   [08] Navigation
   [09] Workspace Auto-hide & Window States
   [10] Buttons
   [11] Modals
   [12] Reserved
   [13] Callouts
   [14] Embedded Notes
   ===================================================================== */

/* [01] Design Tokens */
:root {
    /* SCRIPTORIUM is a full Obsidian theme centered on readability,
       paper-like tactility, and calm visual rhythm.

       Maintenance notes:
       - Light-mode accent and secondary colors are tuned for better text contrast.
       - Link states are differentiated more clearly for long-form note reading.
       - Properties styling is intentionally conservative; avoid changing its
         layout, spacing, or internal input controls.
       - Version-specific design notes live next to the rules they explain. */
    /* Font Stacks */
    --scrip-font-mono-stack: "IBM Plex Mono", "SF Mono", "Consolas", "Monaco", "Menlo", "Roboto Mono", "Courier New", monospace;
    --scrip-font-cjk-stack: "IBM Plex Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
    /* Heading stack uses a serif-forward system to separate titles from sans body text. */
    --scrip-font-heading-stack: "Noto Serif SC", "Source Han Serif SC", "IBM Plex Serif", "Georgia", "Times New Roman", serif;
    --scrip-font-text: var(--font-text, var(--scrip-font-cjk-stack));

    /* Typographic scale: CJK-heavy headings stay tighter with zero tracking. */
    --scrip-type-inline-title-size: 2.08rem;
    --scrip-type-inline-title-leading: 1.18;
    --scrip-type-inline-title-tracking: 0;
    --scrip-type-h1-size: 2.16rem;
    --scrip-type-h1-leading: 1.16;
    --scrip-type-h1-tracking: 0;
    --scrip-type-h2-size: 1.62rem;
    --scrip-type-h2-leading: 1.22;
    --scrip-type-h2-tracking: 0;
    --scrip-type-h3-size: 1.24rem;
    --scrip-type-h3-leading: 1.34;
    --scrip-type-h3-tracking: 0;

    /* 字号 / Font Sizes */
    --font-size-h1: var(--scrip-type-h1-size);
    --font-size-h2: var(--scrip-type-h2-size);
    --font-size-h3: var(--scrip-type-h3-size);
    --font-size-h4: 1.08rem;
    --font-size-h5: 0.98rem;
    --font-size-h6: 0.9rem;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-normal: var(--font-weight-regular);
    --font-medium: var(--font-weight-medium);
    --font-semibold: var(--font-weight-semibold);
    --font-bold: var(--font-weight-bold);

    /* Mobile Text Size Adjust */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* Density Modifier */
    --density-modifier: 1;

    /* Focus Ring */
    --outline-width: 3px;
    --outline-offset: 2px;
    --focus-ring-width: 2px;
    --focus-ring-width-large: 4px;

    /* Spacing System (4px Grid) */
    --size-1: 4px;
    --size-2: 8px;
    --size-3: 12px;
    --size-4: 16px;
    --size-5: 20px;
    --size-6: 24px;
    --size-7: 32px;
    --size-8: 40px;

    /* Easing Functions */
    --motion-apple: cubic-bezier(0.16, 1, 0.3, 1);

    /* Animation Duration */
    --duration-fast: 140ms;
    --duration-moderate: 220ms;

    /* Animation Shorthands */
    --ease-fast-smooth: var(--duration-fast) var(--motion-apple);
    --ease-moderate-smooth: var(--duration-moderate) var(--motion-apple);

    /* Spring Animation */
    --motion-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-spring: 300ms var(--motion-spring);

    /* Common Transitions */
    /* Fast Transform */
    --transition-fast-ease: transform var(--ease-fast-smooth), opacity var(--ease-fast-smooth);
    /* State Change */
    --transition-state:
        background-color var(--ease-fast-smooth),
        color var(--ease-fast-smooth),
        box-shadow var(--ease-fast-smooth);
    /* Interactive Elements */
    --transition-interactive:
        var(--transition-state),
        border-color var(--ease-fast-smooth),
        var(--transition-fast-ease);

    /* Border Radius */
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-xl: 20px;

    /* High-frequency controls avoid hover lift; press feedback stays visible
       through scale instead. */
    --transform-scale-pressed: 0.97;
    --transform-scale-checked: 1.05;
    --transform-scale-hidden: 0.85;
    --transform-translate-hover: 0;
    --transform-translate-hidden: -12px;

    /* Spacing Multipliers */
    --multiplier-tight: 0.8;
    --multiplier-relaxed: 1.2;

    /* Color Mix Percentages */
    --percentage-color-mix-low: 20%;

    /* Opacity System */
    --opacity-minimal: 0.04;
    --opacity-subtle: 0.08;
    --opacity-moderate: 0.15;
    --opacity-medium: 0.25;
    --opacity-half: 0.45;
    --opacity-strong: 0.65;
    --opacity-glass: 0.82;

    /* Texture System: SVG micro-noise */
    --scrip-texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
    --scrip-texture-noise-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");

    /* Responsive Breakpoints */
    --size-max-width-reading: 65ch;
    --size-max-width-reading-paper: min(75ch, calc(100vw - 4rem));
    --size-max-width-mobile: 90vw;

    /* Color Palette */
    --white: 253, 254, 254;

    /* Gray Scale */
    --gray-10: 252, 248, 239;
    /* Beige paper tint */
    --gray-20: 238, 228, 214;
    --gray-30: 214, 205, 193;
    --gray-40: 184, 176, 164;
    --gray-50: 157, 149, 137;
    --gray-60: 127, 119, 107;
    --gray-65: 109, 102, 93;
    --gray-70: 97, 89, 79;
    --gray-80: 70, 63, 53;
    --gray-90: 50, 45, 35;
    --gray-100: 32, 28, 19;

    /* Accent color: warm orange family */
    --color-accent-rgb-light: 194, 78, 24;
    --color-accent-rgb-dark: 218, 114, 56;
    --color-accent-fill-rgb-light: 194, 78, 24;
    --color-accent-fill-rgb-dark: 197, 82, 18;

    /* Secondary color: muted green family */
    --color-secondary-rgb-light: 64, 110, 64;
    --color-secondary-rgb-dark: 126, 158, 119;

    /* Heading accents */
    --h4-color-rgb-light: 188, 80, 26;
    --h4-color-rgb-dark: 186, 90, 24;
    --h5-color-rgb-light: 80, 124, 78;
    --h5-color-rgb-dark: 85, 130, 82;

    /* Borders */
    --border-width: 1px;
    --border-width-thick: calc(var(--border-width) * 2);

    /* Decorative indicators */
    --indicator-width: 3px;
    --indicator-width-wide: 4px;

    /* Table styling */
    --table-zebra-light: rgba(var(--gray-20), var(--opacity-medium));
    --table-zebra-dark: rgba(var(--gray-80), var(--opacity-medium));
    --table-hover-light: rgba(var(--gray-20), var(--opacity-half));
    --table-hover-dark: rgba(var(--gray-80), var(--opacity-half));

    /* Status Bar Dimensions & Opacity */
    --scrip-chrome-muted-opacity: 0.72;
    --scrip-status-expanded-width: min(28rem, calc(100vw - var(--size-8)));
}


/* [02] Shadows & Theme Colors */
.theme-light {
    color-scheme: light;
    --color-accent: rgb(var(--color-accent-rgb-light));
    --color-secondary: rgb(var(--color-secondary-rgb-light));
    --scrip-shadow-color: 28deg 15% 35%;

    /* Multi-layered ambient shadows simulate a soft physical light source. */
    --scrip-shadow-ambient: 0 1px 2px hsl(var(--scrip-shadow-color) / 0.05), 0 2px 4px hsl(var(--scrip-shadow-color) / 0.05), 0 4px 8px hsl(var(--scrip-shadow-color) / 0.05);
    --scrip-shadow-key: 0 10px 20px -5px hsl(var(--scrip-shadow-color) / 0.12), 0 5px 10px -5px hsl(var(--scrip-shadow-color) / 0.08);
    --scrip-shadow-s: var(--scrip-shadow-key), var(--scrip-shadow-ambient);
    --scrip-shadow-l:
        0 1px 1px hsl(var(--scrip-shadow-color) / 0.02),
        0 2px 2px hsl(var(--scrip-shadow-color) / 0.02),
        0 4px 4px hsl(var(--scrip-shadow-color) / 0.02),
        0 8px 8px hsl(var(--scrip-shadow-color) / 0.02),
        0 16px 16px hsl(var(--scrip-shadow-color) / 0.02),
        0 32px 32px hsl(var(--scrip-shadow-color) / 0.02),
        0 48px 96px -32px hsl(var(--scrip-shadow-color) / 0.15);
    --scrip-shadow-tactile:
        0 3px 12px -6px hsl(var(--scrip-shadow-color) / 0.2),
        0 1px 4px -2px hsl(var(--scrip-shadow-color) / 0.16);
    --color-accent-rgb: var(--color-accent-rgb-light);
    --color-accent-fill-rgb: var(--color-accent-fill-rgb-light);
    --color-secondary-rgb: var(--color-secondary-rgb-light);
    --h4-color-rgb: var(--h4-color-rgb-light);
    --h5-color-rgb: var(--h5-color-rgb-light);

    /* Background colors */
    --background-base-rgb: var(--gray-10);
    --background-hover: rgba(var(--gray-50), var(--opacity-subtle));
    --background-active: rgba(var(--gray-50), var(--opacity-moderate));
    --background-selected: rgba(var(--gray-50), var(--opacity-moderate));
    --background-selected-hover: rgba(var(--gray-50), var(--opacity-moderate));
    --background-inverse: rgb(var(--gray-80));

    /* Clean light-mode glass base */
    --layer-glass-1: rgba(var(--layer-1-rgb), var(--opacity-glass));
    --layer-glass-2: rgba(var(--layer-2-rgb), var(--opacity-glass));

    --layer-1-rgb: var(--white);
    --layer-2-rgb: var(--gray-10);
    --layer-hover-1: rgb(var(--gray-10));
    --layer-hover-2: rgba(var(--gray-20), var(--opacity-half));
    --layer-active-1: rgb(var(--gray-30));
    --layer-active-2: rgb(var(--gray-30));
    --layer-selected-1: rgb(var(--gray-20));
    --layer-selected-2: rgb(var(--gray-20));
    --layer-selected-hover-1: rgba(var(--gray-30), var(--opacity-half));
    --layer-selected-hover-2: rgba(var(--gray-30), var(--opacity-half));

    /* Form field colors */
    --field-1-rgb: var(--white);
    --field-hover-1-rgb: var(--gray-20);

    /* Border colors */
    --border-subtle-0-rgb: var(--gray-20);
    --border-subtle-1-rgb: var(--gray-20);
    --border-subtle-2-rgb: var(--gray-20);
    --border-subtle-selected-1-rgb: var(--gray-30);
    --border-subtle-selected-2-rgb: var(--gray-30);
    --border-strong-1-rgb: var(--gray-50);
    --border-strong-2-rgb: var(--gray-50);
    --border-inverse-rgb: var(--gray-100);

    /* Text colors tuned for the warm palette */
    --text-primary-rgb: var(--gray-100);
    --text-secondary-rgb: var(--gray-80);
    --text-placeholder-rgb: var(--gray-70);
    --text-muted-rgb: var(--gray-70);

    /* Icon colors */
    --icon-primary-rgb: var(--gray-100);
    --icon-secondary-rgb: var(--gray-70);
    --icon-on-color-rgb: var(--white);
    --icon-inverse-rgb: var(--white);

    /* Focus and interaction colors */
    --focus: rgb(var(--color-accent-rgb));
    --interactive: rgb(var(--color-accent-rgb));
    --overlay: color-mix(in srgb, rgb(var(--background-base-rgb)) 45%, rgba(0, 0, 0, 0.55));

    /* Workspace background */
    --workspace-background-translucent: rgba(var(--gray-10), var(--opacity-moderate));

    /* Table styling tokens */
    --table-zebra: var(--table-zebra-light);
    --table-hover: var(--table-hover-light);

    /* State colors */
    --color-error-rgb: 201, 76, 59;
    /* Error-leaning red-orange */
    --color-success-rgb: 111, 163, 111;
    /* Soft success green */
    --color-warning-rgb: 227, 163, 59;
    /* Warning yellow-orange */

    /* Vault switcher mask tuning is defined at :root by default; override here only when theme-specific changes are needed. */
    --scrip-app-texture: var(--scrip-texture-noise);
}

.theme-dark {
    color-scheme: dark;
    --color-accent: rgb(var(--color-accent-rgb-dark));
    --color-secondary: rgb(var(--color-secondary-rgb-dark));
    --scrip-shadow-color: 28deg 28% 16%;
    --scrip-shadow-key: 0 2px 10px -4px hsl(var(--scrip-shadow-color) / 0.32);
    --scrip-shadow-ambient: 0 0 1px 0 hsl(var(--scrip-shadow-color) / 0.4);
    --scrip-shadow-s: var(--scrip-shadow-key), var(--scrip-shadow-ambient);
    --scrip-shadow-l:
        0 18px 52px -20px hsl(var(--scrip-shadow-color) / 0.44),
        0 8px 24px -14px hsl(var(--scrip-shadow-color) / 0.34);
    --scrip-shadow-tactile:
        0 3px 10px -6px hsl(var(--scrip-shadow-color) / 0.36),
        0 1px 3px -1px hsl(var(--scrip-shadow-color) / 0.48);
    --color-accent-rgb: var(--color-accent-rgb-dark);
    --color-accent-fill-rgb: var(--color-accent-fill-rgb-dark);
    --color-secondary-rgb: var(--color-secondary-rgb-dark);
    --h4-color-rgb: var(--h4-color-rgb-dark);
    --h5-color-rgb: var(--h5-color-rgb-dark);
    --background-base-rgb: var(--gray-100);
    --background-hover: rgba(var(--gray-50), var(--opacity-subtle));
    --background-active: rgba(var(--gray-50), var(--opacity-medium));
    --background-selected: rgba(var(--gray-50), var(--opacity-moderate));
    --background-selected-hover: var(--background-selected);

    /* Frosted-surface base colors */
    --layer-glass-1: rgba(var(--layer-1-rgb), var(--opacity-glass));
    --layer-glass-2: rgba(var(--layer-2-rgb), var(--opacity-glass));

    --layer-1-rgb: var(--gray-90);
    --layer-2-rgb: var(--gray-80);
    --layer-hover-1: rgba(var(--layer-1-rgb), var(--opacity-half));
    --layer-hover-2: rgba(var(--layer-2-rgb), var(--opacity-half));
    --layer-active-1: rgb(var(--gray-70));
    --layer-active-2: rgb(var(--gray-60));
    --layer-selected-1: rgb(var(--layer-1-rgb));
    --layer-selected-2: rgb(var(--layer-2-rgb));
    --layer-selected-hover-1: rgba(var(--gray-70), var(--opacity-half));
    --layer-selected-hover-2: rgba(var(--gray-60), var(--opacity-half));
    --field-1-rgb: var(--layer-1-rgb);
    --field-hover-1-rgb: var(--layer-2-rgb);
    --border-subtle-0-rgb: var(--gray-80);
    --border-subtle-1-rgb: var(--border-subtle-0-rgb);
    --border-subtle-2-rgb: var(--gray-70);
    --border-subtle-selected-1-rgb: var(--border-subtle-2-rgb);
    --border-subtle-selected-2-rgb: var(--gray-60);
    --border-strong-1-rgb: var(--gray-60);
    --border-strong-2-rgb: var(--gray-50);
    --border-inverse-rgb: var(--gray-10);
    --text-primary-rgb: var(--gray-10);
    --text-secondary-rgb: var(--gray-20);
    --text-placeholder-rgb: var(--gray-30);
    --text-muted-rgb: var(--gray-30);
    --icon-primary-rgb: var(--text-primary-rgb);
    --icon-secondary-rgb: var(--text-secondary-rgb);
    --icon-on-color-rgb: var(--white);
    --icon-inverse-rgb: var(--background-base-rgb);
    --focus: rgb(var(--color-accent-rgb));
    --interactive: var(--focus);
    --overlay: color-mix(in srgb, rgb(var(--background-base-rgb)) 60%, rgba(0, 0, 0, 0.6));
    --workspace-background-translucent: rgba(var(--background-base-rgb), var(--opacity-moderate));
    --table-zebra: var(--table-zebra-dark);
    --table-hover: var(--table-hover-dark);
    /* State colors */
    --color-error-rgb: 214, 102, 84;
    --color-success-rgb: 142, 186, 142;
    --color-warning-rgb: 240, 185, 90;

    --scrip-app-texture: var(--scrip-texture-noise-dark);
}


/* [03] Theme Mapping */
.theme-light,
.theme-dark {
    /* Background and layers */
    --background: rgb(var(--background-base-rgb));
    --layer-1: rgb(var(--layer-1-rgb));
    --layer-2: rgb(var(--layer-2-rgb));
    --field-1: rgb(var(--field-1-rgb));
    --field-hover-1: rgb(var(--field-hover-1-rgb));

    /* Heading colors */
    --h3-color: rgb(var(--color-accent-rgb));
    --h4-color: rgb(var(--h4-color-rgb));
    --h5-color: rgb(var(--h5-color-rgb));

    /* Text colors */
    --text-primary: rgb(var(--text-primary-rgb));
    --text-secondary: rgb(var(--text-secondary-rgb));
    --text-placeholder: rgb(var(--text-placeholder-rgb));
    --text-muted: rgb(var(--text-muted-rgb));

    /* Icon colors */
    --icon-primary: rgb(var(--icon-primary-rgb));
    --icon-secondary: rgb(var(--icon-secondary-rgb));
    --icon-on-color: rgb(var(--icon-on-color-rgb));
    --icon-inverse: rgb(var(--icon-inverse-rgb));

    /* Border colors */
    --border-subtle-0: rgb(var(--border-subtle-0-rgb));
    --border-subtle-1: rgb(var(--border-subtle-1-rgb));
    --border-subtle-2: rgb(var(--border-subtle-2-rgb));
    --border-subtle-selected-1: rgb(var(--border-subtle-selected-1-rgb));
    --border-subtle-selected-2: rgb(var(--border-subtle-selected-2-rgb));
    --border-strong-1: rgb(var(--border-strong-1-rgb));
    --border-strong-2: rgb(var(--border-strong-2-rgb));
    --border-inverse: rgb(var(--border-inverse-rgb));

    /* State background colors */
    --background-modifier-success-hover: rgba(var(--color-success-rgb), var(--opacity-moderate));
    --red: rgba(var(--color-error-rgb), var(--opacity-subtle));
    --green: rgba(var(--color-success-rgb), var(--opacity-subtle));

    /* Emphasis text and interaction */
    --text-accent: var(--interactive);
    --text-accent-hover: color-mix(in srgb, var(--interactive) 82%, var(--text-primary));
    --text-accent-active: color-mix(in srgb, var(--interactive) 68%, var(--text-primary));
    --text-accent-subtle: color-mix(in srgb, var(--interactive) 54%, var(--text-primary));
    --interactive-accent: rgb(var(--color-accent-fill-rgb));
    --interactive-accent-hover: color-mix(in srgb, var(--interactive-accent) 90%, rgb(var(--gray-100)));
    --interactive-accent-active: color-mix(in srgb, var(--interactive-accent) 82%, rgb(var(--gray-100)));
    --interactive-accent-rgb: var(--color-accent-fill-rgb);
    --highlight: rgba(var(--color-accent-rgb), var(--opacity-strong));
    --highlight-subtle: rgba(var(--color-accent-rgb), var(--opacity-medium));
    --highlight-strong: rgba(var(--color-accent-rgb), 0.9);
    --text-highlight-bg: var(--highlight);
    --text-highlight-bg-active: var(--highlight);
    --highlight-color: var(--highlight);
    --color-accent-1: color-mix(in srgb, var(--interactive) 90%, var(--layer-1));
    --color-accent-2: color-mix(in srgb, var(--interactive) 82%, var(--layer-1));
    --color-accent-3: color-mix(in srgb, var(--interactive) 70%, var(--layer-1));
    --color-accent-4: color-mix(in srgb, var(--interactive) 55%, var(--layer-1));
    --color-accent-dark-1: color-mix(in srgb, var(--interactive) 88%, var(--background));
    --color-accent-dark-2: color-mix(in srgb, var(--interactive) 78%, var(--background));
    --color-accent-dark-3: color-mix(in srgb, var(--interactive) 68%, var(--background));

    /* Secondary color variants */
    --color-secondary-1: color-mix(in srgb, var(--color-secondary) 90%, var(--layer-1));
    --color-secondary-2: color-mix(in srgb, var(--color-secondary) 82%, var(--layer-1));
    --color-secondary-3: color-mix(in srgb, var(--color-secondary) 70%, var(--layer-1));
    --color-secondary-4: color-mix(in srgb, var(--color-secondary) 55%, var(--layer-1));
    --color-secondary-dark-1: color-mix(in srgb, var(--color-secondary) 88%, var(--background));
    --color-secondary-dark-2: color-mix(in srgb, var(--color-secondary) 78%, var(--background));
    --color-secondary-dark-3: color-mix(in srgb, var(--color-secondary) 68%, var(--background));

    /* Secondary text variants */
    --text-secondary-accent: color-mix(in srgb, var(--color-secondary) 86%, var(--text-primary));
    --text-secondary-accent-hover: color-mix(in srgb, var(--color-secondary) 74%, var(--text-primary));
    --text-secondary-accent-active: color-mix(in srgb, var(--color-secondary) 62%, var(--text-primary));
    --text-secondary-accent-subtle: color-mix(in srgb, var(--color-secondary) 52%, var(--text-primary));

    /* Obsidian compatibility tokens */
    --background-primary: var(--background);
    --background-primary-alt: var(--layer-1);
    --background-secondary: var(--layer-2);
    --background-secondary-alt: var(--layer-1);
    --background-modifier-hover: var(--background-hover);
    --background-modifier-active: var(--background-active);
    --background-modifier-active-hover: rgba(var(--color-accent-rgb), var(--opacity-subtle));
    --background-modifier-border: var(--border-subtle-0);
    --background-modifier-border-hover: var(--border-subtle-1);
    --background-modifier-border-focus: var(--focus);
    --background-modifier-error-rgb: var(--color-error-rgb);
    --background-modifier-error: var(--red);
    --background-modifier-error-hover: rgba(var(--color-error-rgb), var(--opacity-moderate));
    --background-modifier-success-rgb: var(--color-success-rgb);
    --background-modifier-success: var(--green);
    --background-modifier-form-field: var(--field-1);
    --background-modifier-form-field-highlighted: var(--field-hover-1);
    --background-modifier-form-field-active: var(--field-hover-1);
    --background-modifier-form-field-disabled: rgba(var(--gray-50), var(--opacity-minimal));
    --background-modifier-selected: var(--background-selected);
    --background-modifier-selected-hover: var(--background-selected-hover);
    --background-modifier-cover: var(--overlay);
}


/* [04a] App Canvas */
body {
    background-color: var(--background-primary);
    background-image: var(--scrip-app-texture);
    background-repeat: repeat;
}

/* Let the Obsidian canvas show the body texture underneath. */
.app-container,
.workspace {
    background-color: transparent;
}

body.is-mobile {
    background-image: none;
}

body.is-popout-window,
body.is-translucent {
    background-color: var(--background-secondary);
}

body.is-popout-window .workspace,
body.is-translucent .workspace {
    background-color: color-mix(in srgb, var(--background-secondary) 92%, transparent);
}

body.is-mobile {
    --scrip-app-texture: none;
    --scrip-reading-paper-radius: var(--radius-m);
    --scrip-reading-paper-border: transparent;
    --scrip-reading-paper-shadow: none;
    --scrip-chrome-muted-opacity: 1;
}

/* [04b] Semantic Aliases */
html {
    /* Text colors */
    --text-on-accent: rgb(var(--white));
    --text-on-accent-inverted: rgb(var(--gray-100));
    --text-faint: rgb(var(--gray-40));
    --text-normal: var(--text-primary);
    --scrip-ink-strong: var(--text-primary);
    --scrip-ink-soft: color-mix(in srgb, var(--text-primary) 74%, var(--text-muted));
    --scrip-ink-faint: color-mix(in srgb, var(--text-muted) 78%, var(--background));

    /* Text selection colors using richer color mixing */
    --text-selection: color-mix(in srgb, var(--interactive) 25%, transparent);
    --text-selection-highlight: color-mix(in srgb, var(--interactive) 20%, transparent);

    /* Semantic text colors */
    --text-error: rgb(var(--color-error-rgb));
    --text-success: rgb(var(--color-success-rgb));
    --text-warning: rgb(var(--color-warning-rgb));

    /* Border colors */
    --border-color: var(--border-subtle-1);
    --border-color-hover: var(--border-subtle-2);
    --border-color-hover-strong: var(--border-strong-1);
    --border-color-active: var(--border-strong-1);
    --border-color-active-strong: var(--border-strong-2);
    --border-color-focus: var(--focus);
    --border-color-focus-subtle: rgba(var(--color-accent-rgb), var(--opacity-moderate));
    --border-color-secondary: rgba(var(--color-secondary-rgb), var(--opacity-moderate));
    --border-color-secondary-strong: rgba(var(--color-secondary-rgb), var(--opacity-half));

    /* Interaction colors */
    --interactive-hover: color-mix(in srgb, var(--interactive) 88%, var(--background));
    --interactive-hover-strong: color-mix(in srgb, var(--interactive) 84%, var(--background));
    --interactive-active: color-mix(in srgb, var(--interactive) 78%, var(--background));
    --interactive-active-strong: color-mix(in srgb, var(--interactive) 72%, var(--background));
    --interactive-pressed: color-mix(in srgb, var(--interactive) 68%, var(--background));
    --interactive-focus: color-mix(in srgb, var(--interactive) 92%, var(--layer-1));
    --interactive-disabled: color-mix(in srgb, var(--interactive) 35%, var(--text-muted));

    /* Interaction backgrounds */
    --interactive-bg-light: color-mix(in srgb, var(--interactive) 18%, var(--background));
    --interactive-bg-medium: color-mix(in srgb, var(--interactive) 26%, var(--background));
    --interactive-bg-strong: color-mix(in srgb, var(--interactive) 34%, var(--background));
    --scrip-surface-paper: color-mix(in srgb, var(--layer-1) 90%, var(--background));
    --scrip-surface-paper-muted: color-mix(in srgb, var(--layer-1) 80%, var(--background));
    --scrip-rule-soft: color-mix(in srgb, var(--border-subtle-1) 78%, transparent);
    --scrip-rule-strong: color-mix(in srgb, var(--border-subtle-1) 88%, var(--background));
    --scrip-rule-accent: color-mix(in srgb, rgb(var(--color-accent-rgb)) 16%, var(--border-subtle-1));
    --scrip-heading-accent: color-mix(in srgb, var(--interactive) 84%, var(--background));
    --paper-frame-border: var(--scrip-rule-strong);
    --paper-frame-shadow: var(--scrip-shadow-s);
    --panel-surface: var(--scrip-surface-paper);
    --panel-surface-strong: var(--scrip-surface-paper-muted);
    --panel-border-color: var(--scrip-rule-soft);
    --panel-shadow-soft: 0 8px 18px -18px rgba(var(--gray-100), 0.12);
    --title-rule-color: var(--scrip-rule-accent);
    --scrip-reading-paper-radius: var(--radius-l);
    --scrip-reading-paper-border: color-mix(in srgb, var(--paper-frame-border) 48%, transparent);
    --scrip-reading-paper-shadow: 0 18px 42px rgba(var(--gray-100), 0.08);
    --scrip-editorial-rule-strong: linear-gradient(90deg,
            color-mix(in srgb, var(--interactive-accent) 86%, var(--text-primary)) 0,
            color-mix(in srgb, var(--interactive-accent) 42%, transparent) 26%,
            transparent 84%);
    --scrip-native-surface: color-mix(in srgb, var(--panel-surface) 96%, transparent);
    --scrip-native-surface-muted: color-mix(in srgb, var(--layer-2) 46%, transparent);
    --scrip-native-rule: color-mix(in srgb, var(--paper-frame-border) 52%, transparent);

    /* Secondary interaction backgrounds */
    --secondary-bg-light: color-mix(in srgb, var(--color-secondary) 18%, var(--background));
    --secondary-bg-medium: color-mix(in srgb, var(--color-secondary) 26%, var(--background));
    --secondary-bg-strong: color-mix(in srgb, var(--color-secondary) 34%, var(--background));

    /* Icons */
    --icon-s: 1em;
    --icon-color: var(--icon-primary);
    --icon-color-hover: var(--icon-secondary);
    --icon-color-active: var(--interactive);
    --icon-color-disabled: var(--icon-secondary);

    /* Dividers and tabs */
    --divider-color: var(--border-subtle-1);
    --tab-text-color: var(--text-secondary);
    --tab-text-color-active: var(--text-primary);
    --tab-text-color-focused: var(--text-primary);
    --shadow-s: var(--scrip-shadow-s);
    --shadow-l: var(--scrip-shadow-l);
    --shadow-tactile: var(--scrip-shadow-tactile);
    --input-shadow: var(--shadow-tactile);
    --input-shadow-hover: var(--shadow-s);
    --input-shadow-focus: 0 0 0 var(--focus-ring-width) var(--focus);

    /* Tags */
    --tag-color: var(--color-secondary);
    --tag-color-hover: var(--color-secondary-dark-2);
    --tag-color-active: var(--color-secondary-dark-3);
    --tag-color-subtle: var(--text-secondary-accent-subtle);
    --tag-background: rgba(var(--color-secondary-rgb), var(--opacity-subtle));
    --tag-background-hover: rgba(var(--color-secondary-rgb), var(--opacity-moderate));
    --tag-background-active: rgba(var(--color-secondary-rgb), var(--opacity-moderate));
    --tag-border-color: rgba(var(--color-secondary-rgb), var(--opacity-moderate));
    --tag-border-color-hover: rgba(var(--color-secondary-rgb), var(--opacity-half));

    /* Search clear button */
    --search-clear-button-color: var(--icon-secondary);
    --search-clear-button-color-hover: var(--icon-primary);

    /* Scrollbars */
    --scrollbar-size: 8px;
    --scrollbar-radius: var(--radius-s);
    --scrollbar-thumb-color: rgba(var(--gray-65), var(--opacity-medium));
    --scrollbar-thumb-color-hover: rgba(var(--color-secondary-rgb), var(--opacity-half));
    --scrollbar-track-color: transparent;
}

/* [05a] Workspace Tokens */
.workspace {

    /* Navigation item styles */
    --nav-item-background-hover: rgba(var(--color-accent-rgb), var(--opacity-subtle));
    --nav-item-background-active: rgba(var(--color-accent-rgb), 0.12);
    --nav-item-color: var(--text-primary);
    --nav-item-color-hover: var(--text-primary);
    --nav-item-color-active: var(--interactive-active);
    --nav-item-color-subtle: var(--text-secondary);
    --nav-file-background-hover: rgba(var(--color-accent-rgb), var(--opacity-subtle));
    --nav-file-background-hover-strong: rgba(var(--color-accent-rgb), var(--opacity-moderate));
    --nav-file-color: var(--text-primary);
    --nav-file-color-hover: var(--text-primary);
    --nav-file-color-active: var(--interactive-active);
    --nav-folder-color: var(--text-primary);
    --nav-folder-color-hover: var(--text-primary);
    --nav-folder-color-active: var(--interactive-active);

    /* Menu styles */
    --menu-background: var(--layer-1);
    --menu-background-hover: var(--layer-hover-1);
    --menu-text-color: var(--text-primary);
    --menu-text-color-hover: var(--text-primary);
    --menu-border-color: var(--border-subtle-1);

    /* Modal styles */
    --modal-background: var(--layer-1);
    --modal-border-color: var(--border-subtle-1);
    --modal-shadow: var(--shadow-l);

    /* Title text colors */
    --text-title: var(--text-primary);
    --text-title-h1: var(--text-normal);
    --text-title-h2: var(--text-normal);
    --text-title-h3: var(--h3-color);
    --text-title-h4: var(--h4-color);
    --text-title-h5: var(--h5-color);
    --text-title-h6: var(--text-muted);

    /* Links and marks */
    --text-link: var(--interactive);
    --text-link-hover: var(--interactive-hover);
    --text-link-active: var(--interactive-active);
    --text-link-subtle: var(--text-accent-subtle);
    --text-a: var(--interactive);
    --text-a-hover: var(--text-accent-hover);
    --text-a-active: var(--text-accent-active);
    --text-mark: var(--highlight);
    --text-mark-subtle: var(--highlight-subtle);
    --text-mark-strong: var(--highlight-strong);

    /* Icon sizes */
    --icon-size: 1em;
    --icon-size-s: 0.875em;
    --icon-size-m: 1em;
    --icon-size-l: 1.25em;

    /* Blockquotes */
    --blockquote-border-color: rgba(var(--color-secondary-rgb), var(--opacity-strong));
    --blockquote-background-subtle: rgba(var(--color-secondary-rgb), var(--opacity-minimal));
    --blockquote-text-color: var(--text-primary);
    --blockquote-text-color-accent: var(--text-secondary-accent-subtle);

    /* List markers */
    --list-marker-color: var(--text-secondary);
    --list-marker-color-hover: var(--text-primary);
    --list-marker-color-active: var(--interactive);

    /* [05] Typography */
    font-family: var(--scrip-font-text);
    --font-interface: var(--scrip-font-cjk-stack);
    --font-headings: var(--scrip-font-heading-stack);
    --font-text: var(--scrip-font-cjk-stack);
    --font-monospace: var(--scrip-font-mono-stack);
    /* Line heights */
    --line-height-tight: 1.35;
    --line-height-normal: 1.72;
    --line-height-relaxed: 1.8;

    /* Paragraph spacing */
    --paragraph-spacing-base: 1.28rem;
    --paragraph-spacing: calc(var(--paragraph-spacing-base) * var(--density-modifier));
    --paragraph-spacing-tight: calc(var(--paragraph-spacing-base) * var(--multiplier-tight));
    --paragraph-spacing-relaxed: calc(var(--paragraph-spacing-base) * var(--multiplier-relaxed));
    --scrip-editorial-rule: linear-gradient(90deg,
            var(--scrip-heading-accent) 0,
            color-mix(in srgb, var(--scrip-heading-accent) 48%, transparent) 16%,
            transparent 80%);
}

/* Scrollbar Hover Width Transition */
::-webkit-scrollbar {
    width: 14px;
    background-color: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: var(--scrollbar-radius);
    border: 4px solid transparent;
    background-clip: content-box;
    transition: background-color var(--ease-fast-smooth), border-width 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-color-hover);
    border-width: 2px;
}

body.styled-scrollbars .cm-scroller:not(:hover)::-webkit-scrollbar-thumb,
body.styled-scrollbars .markdown-preview-view:not(:hover)::-webkit-scrollbar-thumb,
body.styled-scrollbars .nav-files-container:not(:hover)::-webkit-scrollbar-thumb,
body.styled-scrollbars .nav-folder-children:not(:hover)::-webkit-scrollbar-thumb {
    background-color: transparent;
}


/* Shared focus ring lives at the semantic layer so navigation, links,
   buttons, and form fields inherit one accessibility treatment. */
:is(button, input, textarea, select, a, .nav-file-title, .nav-folder-title, .tree-item-inner, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--outline-width) solid var(--background-modifier-border-focus);
    outline-offset: var(--outline-offset);
}

/* Operational UI surfaces use a quieter sans stack for faster scanning,
   while document titles and headings keep the serif-forward voice. */
:is(.workspace-tabs, .workspace-tab-header, .workspace-tab-header-inner, .nav-header, .nav-files-container, .nav-folder-title, .nav-file-title, .tree-item-inner, .menu, .menu-item, .suggestion-container, .suggestion-item, .modal, .modal-title, .prompt, .prompt-input, .search-input-container, .search-result, .clickable-icon, button, input, select, textarea) {
    font-family: var(--font-interface);
}

/* [06] Markdown Layout */
.workspace-leaf-content[data-type="markdown"] {
    container-name: scriptorium-note;
    container-type: inline-size;
}

@container scriptorium-note (max-width: 34rem) {
    :is(.markdown-source-view, .markdown-preview-view, .inline-title) {
        --scrip-type-inline-title-size: 1.78rem;
        --scrip-type-h1-size: 1.86rem;
        --scrip-type-h2-size: 1.4rem;
        --scrip-type-h3-size: 1.12rem;
        --paragraph-spacing-base: 1.08rem;
    }
}

/* [06a] Editor Surface */
.markdown-source-view {
    line-height: var(--line-height-normal);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    @media (max-width: 900px) {
        font-feature-settings: "kern" 1, "liga" 1;
    }
}

/* [06b] Editor Flow */
.markdown-source-view .cm-line {
    margin-block-end: calc(var(--paragraph-spacing) * var(--multiplier-tight));
    letter-spacing: 0;
    text-wrap: pretty;
    position: relative;

    @media (max-width: 900px) {
        margin-block-end: calc(var(--paragraph-spacing) * 0.65);
    }
}

/* [06c] Reading Surface */
.markdown-preview-view {
    line-height: var(--line-height-relaxed);
    max-width: var(--size-max-width-reading);
    margin: 0 auto;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "palt" 1;

    @media (max-width: 900px) {
        max-width: var(--size-max-width-mobile);
        font-feature-settings: "kern" 1, "liga" 1;
    }
}

.markdown-reading-view .markdown-preview-view {
    box-sizing: border-box;
    max-width: var(--size-max-width-reading-paper);
    padding: clamp(1.6rem, 3vw, 2.6rem);
    margin-block: clamp(1rem, 2.4vw, 2.4rem);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--panel-surface) 99%, transparent),
            color-mix(in srgb, var(--background-primary) 96%, transparent)),
        var(--scrip-app-texture);
    border: var(--border-width) solid var(--scrip-reading-paper-border);
    border-radius: var(--scrip-reading-paper-radius);
    box-shadow: var(--scrip-reading-paper-shadow);
}

/* [06d] Reading Paragraph Rhythm */
.markdown-preview-view p {
    line-height: var(--line-height-relaxed);
    margin-block-end: calc(var(--paragraph-spacing) * 0.96);
    letter-spacing: 0;
    word-break: break-word;
    line-break: auto;
    text-align: justify;
    text-wrap: pretty;
    hyphens: none;

    @media (max-width: 900px) {
        margin-block-end: calc(var(--paragraph-spacing) * 0.8);
        text-align: start;
        text-wrap: pretty;
    }
}

/* Keep full justification for prose, but fall back to start alignment for
   structured or technical reading contexts where spacing artifacts are more noticeable. */
.markdown-preview-view :is(li p, blockquote p, .callout-content p, .markdown-embed p, td p, th p) {
    text-align: start;
}

/* [06e] Shared Selection */
::selection {
    background: var(--text-selection);
    color: inherit;
}

.markdown-preview-view ::selection,
.markdown-rendered ::selection,
.markdown-source-view.mod-cm6 .cm-selectionBackground,
.markdown-source-view.mod-cm6.cm-focused .cm-selectionBackground,
.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused>.cm-scroller>.cm-selectionLayer .cm-selectionBackground {
    background: var(--text-selection-highlight);
}

/* [06f] Note Title */
.inline-title {
    font-family: var(--font-headings);
    font-size: var(--scrip-type-inline-title-size);
    line-height: var(--scrip-type-inline-title-leading);
    letter-spacing: var(--scrip-type-inline-title-tracking);
    font-weight: var(--font-semibold);
    color: var(--scrip-ink-strong);
    text-wrap: balance;
    max-width: min(100%, 36ch);
    padding: var(--size-2) 0 var(--size-4);
    margin-bottom: var(--size-5);
    border-bottom: 0;
    background-image: var(--scrip-editorial-rule-strong);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: min(28rem, 68%) var(--border-width-thick);
}

/* [06g] Shared Typographic Refinements */
.markdown-preview-view p,
.markdown-source-view .cm-line {
    font-kerning: normal;
    letter-spacing: normal;
}

.markdown-source-view.mod-cm6 .cm-content,
.markdown-preview-view,
.inline-title {
    font-variant-ligatures: common-ligatures contextual;
}

/* [06h] Reading Headings */
.markdown-preview-view :is(h1, h2) {
    font-family: var(--font-headings);
    color: var(--scrip-ink-strong);
    text-wrap: balance;
}

.markdown-preview-view h1 {
    font-size: var(--scrip-type-h1-size);
    line-height: var(--scrip-type-h1-leading);
    letter-spacing: var(--scrip-type-h1-tracking);
    font-weight: var(--font-semibold);
    margin-top: calc(var(--paragraph-spacing) * 1.18);
    padding-left: 0;
    border-left: 0;
    background-image: var(--scrip-editorial-rule);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: min(22rem, 68%) var(--border-width-thick);
    padding-bottom: var(--size-2);
    margin-bottom: calc(var(--paragraph-spacing) * 1.05);
}

.markdown-reading-view .markdown-preview-view h1 {
    margin-top: calc(var(--paragraph-spacing) * 1.7);
}

.markdown-preview-view h2 {
    font-size: var(--scrip-type-h2-size);
    line-height: var(--scrip-type-h2-leading);
    letter-spacing: var(--scrip-type-h2-tracking);
    font-weight: var(--font-semibold);
    margin-top: calc(var(--paragraph-spacing) * 1.78);
    border-bottom: 0;
    width: 100%;
    margin-bottom: calc(var(--paragraph-spacing) * 0.78);
}

.markdown-preview-view h3 {
    font-size: var(--scrip-type-h3-size);
    line-height: var(--scrip-type-h3-leading);
    letter-spacing: var(--scrip-type-h3-tracking);
    font-family: var(--font-headings);
    font-weight: var(--font-semibold);
    color: var(--text-secondary-accent);
    margin-top: calc(var(--paragraph-spacing) * 0.98);
    margin-bottom: calc(var(--paragraph-spacing-tight) * 0.82);
}

.markdown-preview-view :is(h4, h5, h6) {
    line-height: var(--line-height-tight);
    letter-spacing: 0;
    text-wrap: balance;
    margin-top: calc(var(--paragraph-spacing) * 0.9);
    margin-bottom: calc(var(--paragraph-spacing-tight) * 0.64);
    color: var(--scrip-ink-soft);
}

.markdown-preview-view :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* [06i] Editor Heading Sync */
.markdown-source-view.mod-cm6 .HyperMD-header.HyperMD-header-2.cm-line {
    border-bottom: 0;
}

.markdown-source-view.mod-cm6 :is(.HyperMD-header-1, .HyperMD-header-2, .HyperMD-header-3).cm-line {
    font-family: var(--font-headings);
    font-weight: var(--font-semibold);
    color: var(--scrip-ink-strong);
}

.markdown-source-view.mod-cm6 .HyperMD-header-1.cm-line {
    font-size: var(--scrip-type-h1-size);
    line-height: var(--scrip-type-h1-leading);
    letter-spacing: var(--scrip-type-h1-tracking);
    margin-top: calc(var(--paragraph-spacing) * 0.85);
    margin-bottom: calc(var(--paragraph-spacing-tight) * 0.9);
}

.markdown-source-view.mod-cm6 .HyperMD-header-2.cm-line {
    font-size: var(--scrip-type-h2-size);
    line-height: var(--scrip-type-h2-leading);
    letter-spacing: var(--scrip-type-h2-tracking);
}

.markdown-source-view.mod-cm6 .HyperMD-header-3.cm-line {
    font-size: var(--scrip-type-h3-size);
    line-height: var(--scrip-type-h3-leading);
    letter-spacing: var(--scrip-type-h3-tracking);
    color: var(--text-secondary-accent);
    margin-top: calc(var(--paragraph-spacing) * 0.4);
}

/* [06j] Active Line Indicator */
.markdown-source-view.mod-cm6 .cm-active:not(.HyperMD-header, .HyperMD-codeblock)::before,
.markdown-source-view.mod-cm6 .cm-active.HyperMD-quote::before {
    content: '';
    height: 100%;
    position: absolute;
    left: calc(var(--size-3) * -1);
    border-left: var(--indicator-width) solid var(--interactive);
    border-radius: var(--radius-s) 0 0 var(--radius-s);
    opacity: var(--opacity-strong);
    pointer-events: none;
}

/* [07] Markdown Elements */
/* Element-local variables stay near their component blocks on purpose:
   preview/table/list scopes are easier to maintain when the token and the rule
   live together inside the same markdown element section. */
/* [07a] Tables */
.markdown-preview-view table {
    --table-border-radius: var(--radius-l);
    --table-border-width: var(--border-width);
    --table-border-color: var(--border-subtle-1);
    --table-header-bg: var(--layer-2);
    border-collapse: separate;
    border-spacing: 0;
    border: var(--table-border-width) solid var(--table-border-color);
    border-radius: var(--table-border-radius);
    overflow: hidden;
    width: 100%;
    margin-block: var(--size-6);
    box-shadow: none;
}

.markdown-preview-view table th {
    background-color: color-mix(in srgb, var(--layer-2) 96%, var(--panel-surface));
    font-weight: var(--font-semibold);
    padding: var(--size-2) var(--size-4);
    text-align: start;
    border-bottom: var(--border-width) solid var(--border-subtle-1);
}

.markdown-preview-view table td {
    padding: var(--size-2) var(--size-4);
}

.markdown-preview-view table tbody tr:nth-child(even) {
    background-color: color-mix(in srgb, var(--table-zebra) 72%, transparent);
}

.markdown-preview-view table tbody tr:hover {
    background-color: color-mix(in srgb, var(--table-hover) 72%, transparent);
    transition: background-color var(--ease-fast-smooth);
}

@media (max-width: 900px) {
    .markdown-preview-view table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
    }

    .markdown-preview-view table th,
    .markdown-preview-view table td {
        min-width: 5rem;
        word-break: break-word;
    }
}

/* [07b] Code Styles */
/* The reading paper is the main elevated surface, so code blocks keep texture
   and border but avoid their own shadow layer. */
.markdown-preview-view :not(pre) > code,
.markdown-rendered :not(pre) > code,
.markdown-source-view.mod-cm6 .cm-inline-code {
    font-family: var(--font-monospace);
    font-size: 0.94em;
    color: var(--text-primary);
    background-color: color-mix(in srgb, var(--layer-2) 68%, var(--panel-surface));
    border: 1px solid color-mix(in srgb, var(--paper-frame-border) 50%, transparent);
    border-radius: var(--radius-s);
    padding: 0.08em 0.36em;
}

.markdown-preview-view pre,
.markdown-rendered pre {
    font-family: var(--font-monospace);
    background-color: color-mix(in srgb, var(--panel-surface) 92%, var(--layer-2));
    border: var(--border-width) solid color-mix(in srgb, var(--paper-frame-border) 56%, transparent);
    border-radius: var(--radius-m);
    padding: var(--size-3) var(--size-4);
    margin: var(--size-5) 0;
    overflow-x: auto;
    box-shadow: none;
    tab-size: 4;
}

.markdown-preview-view pre code,
.markdown-rendered pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.92em;
    line-height: var(--line-height-normal);
    color: inherit;
}

.markdown-source-view.mod-cm6 .cm-formatting-code {
    color: var(--text-muted);
    opacity: 0.72;
}

/* Source mode gets a quiet left rail so code reads as structure while editing. */
.markdown-source-view.mod-cm6 .HyperMD-codeblock {
    font-family: var(--font-monospace);
    color: var(--text-primary);
    background-color: color-mix(in srgb, var(--layer-2) 34%, transparent);
    border-left: var(--border-width-thick) solid color-mix(in srgb, var(--paper-frame-border) 48%, transparent);
    padding-inline-start: var(--size-3);
}

/* [07c] List Styles */
.markdown-preview-view ul,
.markdown-preview-view ol {
    margin: calc(var(--paragraph-spacing) * 0.96) 0;
    padding-inline-start: var(--size-7);
}

.markdown-preview-view :is(ul, ol) :is(ul, ol) {
    margin: calc(var(--paragraph-spacing-tight) * 0.82) 0;
    padding-inline-start: var(--size-6);
}

.markdown-preview-view li {
    margin: calc(var(--size-2) * 0.85) 0;
    line-height: var(--line-height-normal);
}

.markdown-preview-view li::marker {
    color: color-mix(in srgb, var(--list-marker-color) 80%, var(--text-muted));
}

.markdown-preview-view li>p {
    margin-block-end: calc(var(--paragraph-spacing-tight) * 0.7);
}

/* List marker styling */
.markdown-preview-view ul {
    list-style-type: disc;
}

.markdown-preview-view ul ul {
    list-style-type: circle;
}

.markdown-preview-view ul ul ul {
    list-style-type: square;
}

.markdown-preview-view ol {
    list-style-type: decimal;
}

/* [07d] Highlight Styles */
.search-result-file-matched-text,
.markdown-rendered mark,
.cm-s-obsidian span.cm-highlight {
    --scrip-highlight-dir: to right;
    color: var(--text-normal);
    padding: 0.05em 0;
    background: linear-gradient(var(--scrip-highlight-dir), var(--highlight-subtle), var(--highlight-subtle));
    background-size: 100% 5px, 0 5px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--ease-moderate-smooth);
    border-radius: var(--radius-s);

    &:hover {
        background-size: 100% 100%, 0 .1em;
    }
}

/* RTL highlight direction override */
[dir="rtl"] :is(.search-result-file-matched-text, .markdown-rendered mark, .cm-s-obsidian span.cm-highlight) {
    --scrip-highlight-dir: to left;
}


/* [07e] Link Styles */
/* [07e-i] Link Tokens */
:is(.markdown-rendered, .markdown-source-view) {
    --link-unresolved-opacity: 0.72;
    --link-unresolved-color: color-mix(in srgb, var(--text-accent) 48%, var(--text-muted));
    --link-unresolved-hover-color: var(--text-accent-hover);
    --link-style: normal;
    --link-text-transform: none;
    --link-external-style: normal;
    --link-color-base: color-mix(in srgb, var(--text-accent) 88%, var(--text-primary));
    --link-color-hover: color-mix(in srgb, var(--text-accent-hover) 84%, var(--text-primary));
    --link-color-active: var(--text-accent-active);
    --link-external-color-base: var(--link-color-base);
    --link-external-color-hover: var(--link-color-hover);
    --link-external-color-active: var(--text-a-active);
    --link-visited-color-base: color-mix(in srgb, var(--text-secondary-accent) 78%, var(--text-primary));
    --link-visited-color-hover: color-mix(in srgb, var(--text-secondary-accent-active) 84%, var(--text-primary));
    --link-underline-offset: 0.15em;
}

.markdown-rendered :is(.internal-link, .external-link),
.markdown-source-view :is(.cm-hmd-internal-link, .cm-link) {
    font-style: var(--link-style);
    text-transform: var(--link-text-transform);
    color: var(--link-color-base);
    font-weight: var(--font-semibold);
    text-underline-offset: var(--link-underline-offset);
    transition:
        color var(--ease-fast-smooth),
        opacity var(--ease-fast-smooth);

    &:hover {
        color: var(--link-color-hover);
    }

    &:active {
        color: var(--link-color-active);
    }

    &:visited {
        color: var(--link-visited-color-base);

        &:hover {
            color: var(--link-visited-color-hover);
        }
    }
}

.markdown-rendered .external-link,
.markdown-source-view .cm-link:not(.cm-hmd-internal-link) {
    color: var(--link-external-color-base);

    &:hover {
        color: var(--link-external-color-hover);
    }

    &:active {
        color: var(--link-external-color-active);
    }
}

.markdown-rendered .internal-link.is-unresolved,
.markdown-source-view.mod-cm6 :is(.cm-hmd-internal-link, .cm-link).is-unresolved {
    color: var(--link-unresolved-color);
    opacity: var(--link-unresolved-opacity);
    font-weight: var(--font-medium);
    transition: color var(--ease-moderate-smooth),
        opacity var(--ease-moderate-smooth);

    &:hover {
        color: var(--link-unresolved-hover-color);
        opacity: 1;
    }
}

.markdown-source-view .cm-url .cm-underline {
    font-style: var(--link-external-style);
}

/* Restore a gentle emphasis style for Markdown `*emphasis*`,
   including Chinese text where synthetic italic may be needed. */
.markdown-rendered em,
.markdown-source-view :is(.cm-em, .cm-formatting-em) {
    font-style: italic;
    font-synthesis: style;
    color: var(--text-secondary-accent-subtle);
}

/* [07f] Blockquotes */
.markdown-preview-view blockquote {
    background-image:
        linear-gradient(to right,
            color-mix(in srgb, var(--blockquote-background-subtle) 50%, var(--panel-surface)),
            color-mix(in srgb, var(--panel-surface) 94%, transparent) 72%,
            transparent),
        var(--scrip-app-texture);
    background-color: color-mix(in srgb, var(--panel-surface) 94%, transparent);
    border-left: var(--indicator-width-wide) solid color-mix(in srgb, var(--blockquote-border-color) 64%, transparent);
    padding: var(--size-2) var(--size-4);
    margin: calc(var(--paragraph-spacing) * 0.96) 0;
    border-radius: var(--radius-s);
    border-top: var(--border-width) solid color-mix(in srgb, var(--paper-frame-border) 36%, transparent);
    border-right: var(--border-width) solid color-mix(in srgb, var(--paper-frame-border) 20%, transparent);
    border-bottom: var(--border-width) solid color-mix(in srgb, var(--paper-frame-border) 24%, transparent);
    font-style: normal;
    line-height: var(--line-height-relaxed);
    color: color-mix(in srgb, var(--blockquote-text-color) 82%, var(--text-muted));
    box-shadow: none;
}

.markdown-preview-view blockquote > p:first-child {
    margin-top: 0;
}

.markdown-preview-view blockquote > p:last-child {
    margin-bottom: 0;
}

.markdown-source-view.mod-cm6 span.cm-quote.cm-quote-1,
.markdown-source-view.mod-cm5 span.cm-quote {
    font-style: italic;
    color: var(--blockquote-text-color-accent);
}

/* [07g] Horizontal Rules */
.markdown-preview-view hr {
    border: none;
    height: var(--border-width);
    background: linear-gradient(to right,
            transparent,
            color-mix(in srgb, var(--border-subtle-1) 72%, transparent),
            transparent);
    margin: var(--size-6) 0;
    opacity: 0.9;
}

/* [07h] Tag Styles */
.tag {
    background-color: color-mix(in srgb, var(--tag-background) 44%, var(--panel-surface));
    border: 1px solid color-mix(in srgb, var(--tag-border-color) 46%, transparent);
    color: var(--tag-color-subtle);
    border-radius: var(--radius-s);
    padding: 0.06em 0.42em;
    font-size: 0.76rem;
    font-weight: var(--font-medium);
    line-height: var(--line-height-tight);
    transition:
        background-color var(--ease-fast-smooth),
        border-color var(--ease-fast-smooth),
        color var(--ease-fast-smooth);
    display: inline-block;
    vertical-align: baseline;
    margin-inline-end: var(--size-1);
    box-shadow: none;

    &:hover {
        background-color: color-mix(in srgb, var(--tag-background-hover) 54%, transparent);
        border-color: var(--tag-border-color-hover);
        color: var(--tag-color-hover);
        box-shadow: none;
    }

    &:active,
    &.is-active {
        background-color: color-mix(in srgb, var(--tag-background-active) 48%, transparent);
        border-color: var(--tag-border-color-hover);
        color: var(--tag-color-active);
        box-shadow: none;
    }
}

/* [07i] Native Properties */
/* Keep native Properties close to Obsidian's layout; only tune surface,
   color, and focus affordance. */
.metadata-container {
    border-block-color: var(--scrip-native-rule);
    background-color: color-mix(in srgb, var(--scrip-native-surface-muted) 24%, transparent);
    color: var(--scrip-ink-soft);
}

.metadata-property {
    border-radius: var(--radius-s);
    transition:
        background-color var(--ease-fast-smooth),
        box-shadow var(--ease-fast-smooth);
}

.metadata-property:hover,
.metadata-property:focus-within {
    background-color: color-mix(in srgb, var(--background-hover) 72%, transparent);
}

.metadata-property:focus-within {
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--interactive) 58%, transparent);
}

.metadata-property-key {
    color: var(--scrip-ink-faint);
    font-weight: var(--font-medium);
}

.metadata-property-key-input,
.metadata-property-value {
    color: var(--scrip-ink-strong);
    letter-spacing: 0;
}

.metadata-property-icon {
    color: var(--scrip-ink-faint);
    opacity: 0.74;
}

/* Workspace Chrome ==================================================== */
/* [08] Navigation */
.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner, .nav-folder-title-content, .nav-file-title-content) {
    color: var(--nav-item-color);
}

/* Interactive navigation styling */
.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner) {
    transition: var(--transition-state);
    border-radius: var(--radius-s);
    padding-block: 3px;
}

/* Keyboard focus state */
.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner):focus-visible {
    outline: var(--outline-width) solid var(--focus);
    outline-offset: var(--outline-offset);
    background-color: var(--nav-item-background-hover);
    color: var(--nav-item-color-active);
}

.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner):hover {
    background-color: var(--nav-item-background-hover);
    color: var(--nav-item-color-hover);
}

.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner):hover :is(.nav-folder-title-content, .nav-file-title-content, .tree-item-self, .nav-folder-collapse-indicator) {
    color: var(--nav-folder-color-hover);
}

/* Active state with refined highlighting */
.workspace :is(.nav-folder-title, .nav-file-title, .tree-item-inner).is-active {
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--interactive-accent) 16%, transparent),
            transparent 78%);
    color: var(--text-primary);
    box-shadow: inset 4px 0 0 0 var(--interactive-accent);
    font-weight: var(--font-semibold);
}

/* Mobile active navigation state */
body.is-mobile :is(.nav-folder-title, .nav-file-title, .tree-item-inner).is-active {
    background-color: var(--nav-item-background-active);
    color: var(--text-primary);
}

/* [08a] Note Header Hover Reveal */
body:not(.is-mobile, .view-header-title-always) .view-header {
    transition:
        opacity var(--ease-fast-smooth),
        background-color var(--ease-fast-smooth);
}

body:not(.is-mobile, .view-header-title-always) .view-header :is(.view-header-left, .view-header-title-container > div, .view-actions) {
    transition:
        opacity var(--ease-fast-smooth),
        transform var(--ease-moderate-smooth),
        color var(--ease-fast-smooth);
    transform-origin: center left;
}

body:not(.is-mobile, .view-header-title-always) .view-header-title-parent {
    color: var(--text-faint);
}

body:not(.is-mobile, .view-header-title-always) .view-header:not(:hover):not(:focus-within) :is(.view-header-left, .view-header-title-container > div, .view-actions):not(:focus-within) {
    opacity: var(--scrip-chrome-muted-opacity);
    transform: none;
}

body:not(.is-mobile, .view-header-title-always) .view-header:is(:hover, :focus-within) :is(.view-header-left, .view-header-title-container > div, .view-actions) {
    opacity: 1;
    transform: none;
}

/* [08b] Workspace Tabs */
.workspace-tabs {
    background-color: color-mix(in srgb, var(--layer-1) 98%, transparent);
}

.workspace-tab-header-container {
    gap: 2px;
    padding: 2px 4px 0;
}

.workspace-tab-header {
    border-radius: var(--radius-s) var(--radius-s) 0 0;
    background-color: transparent;
    color: var(--text-secondary);
    margin-inline: 1px;
    box-shadow: none;
    transition:
        background-color var(--ease-fast-smooth),
        color var(--ease-fast-smooth),
        box-shadow var(--ease-fast-smooth);
}

.workspace-tab-header:hover {
    color: var(--text-primary);
    background-color: var(--background-hover);
}

.workspace-tab-header.is-active {
    color: var(--text-primary);
    background-color: var(--layer-1);
    box-shadow:
        inset 0 -1px 0 0 var(--interactive-accent),
        0 -1px 0 0 color-mix(in srgb, var(--paper-frame-border) 30%, transparent);
}

.workspace-tab-header-inner {
    gap: var(--size-1);
    padding: var(--size-1) var(--size-2);
    min-height: 28px;
}

.workspace-tab-header-inner-title {
    font-weight: var(--font-medium);
}

.workspace-tab-header-inner-close-button {
    opacity: 0.58;
}

.workspace-tab-header:hover .workspace-tab-header-inner-close-button,
.workspace-tab-header.is-active .workspace-tab-header-inner-close-button {
    opacity: 0.86;
}

.workspace-tab-header-inner-close-button:hover {
    opacity: 1;
}

.workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
    box-shadow: none;
}

.workspace-tab-header-container-inner {
    padding-inline: 1px;
}

/* [09] Workspace Auto-hide & Window States */
/* Auto-hidden controls remain in the focus order and recover through the
   same hover/focus-within contract across the workspace. */
/* [09a] Nav Button Container */
body:not(.is-mobile) {
    & .nav-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--size-2) var(--size-2) 0;
        margin-block-start: var(--size-3);
        margin-block-end: var(--size-2);
    }

    & .nav-buttons-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--size-1);
        padding: var(--size-1);
    }
}

/* [09b] Status Bar Hover Reveal */
/* Keep the status bar compact, but avoid animating width/padding; the pill
   remains a visible affordance even when no sync status item is present. */
body:not(.is-mobile) .app-container .status-bar {
    position: fixed;
    bottom: 12px;
    right: 24px;
    z-index: var(--layer-status-bar, 99);
    width: auto;
    height: 32px;
    min-width: 36px;
    max-width: 36px;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: var(--layer-1);
    border: var(--border-width) solid var(--border-subtle-1);
    border-radius: 999px;
    padding: 0;
    opacity: 0.6;
    box-shadow: var(--scrip-shadow-tactile);
    
    transition:
        opacity var(--ease-fast-smooth),
        box-shadow var(--ease-fast-smooth),
        background-color var(--ease-fast-smooth);
}

body:not(.is-mobile) .app-container .status-bar:hover,
body:not(.is-mobile) .app-container .status-bar:focus-within {
    max-width: var(--scrip-status-expanded-width);
    opacity: 1;
    box-shadow: var(--shadow-s);
    justify-content: flex-start;
    padding-inline: var(--size-3);
}

/* Move sync status indicator to the left so it displays when collapsed */
body:not(.is-mobile) .app-container .status-bar .status-bar-item.plugin-sync,
body:not(.is-mobile) .app-container .status-bar .status-bar-item[class*="sync"] {
    order: -1;
}

/* Collapsed items stay keyboard-reachable without affecting pill geometry. */
body:not(.is-mobile) .app-container .status-bar:not(:hover):not(:focus-within) .status-bar-item {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Keep only the sync status item visible when collapsed */
body:not(.is-mobile) .app-container .status-bar:not(:hover):not(:focus-within) .status-bar-item.plugin-sync,
body:not(.is-mobile) .app-container .status-bar:not(:hover):not(:focus-within) .status-bar-item[class*="sync"] {
    position: static;
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

body:not(.is-mobile) .app-container .status-bar .status-bar-item {
    transition:
        opacity var(--ease-fast-smooth),
        color var(--ease-fast-smooth);
}

/* [09c] Sidebar Vault Profile Hover Reveal */
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-switcher,
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions .clickable-icon:first-child,
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="Help"],
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="help"],
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="帮助"] {
    opacity: 0;
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    pointer-events: none;
}

body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions {
    gap: 0;
}

/* Keep hidden profile controls recoverable through hover or keyboard focus.
   Layout changes are intentionally not animated; only opacity/color should
   carry the reveal. */
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher,
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions .clickable-icon:first-child,
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions .clickable-icon[aria-label*="Help"],
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions .clickable-icon[aria-label*="help"],
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions .clickable-icon[aria-label*="帮助"] {
    display: inline-flex;
    transition:
        opacity var(--ease-fast-smooth),
        background-color var(--ease-fast-smooth),
        color var(--ease-fast-smooth);
}

body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:is(:hover, :focus-within) .workspace-drawer-vault-switcher {
    opacity: 1;
    max-width: 180px;
    padding-left: var(--size-2);
    padding-right: var(--size-2);
    margin-left: initial;
    margin-right: initial;
    pointer-events: auto;
}

body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:is(:hover, :focus-within) .workspace-drawer-vault-actions .clickable-icon:first-child,
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:is(:hover, :focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="Help"],
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:is(:hover, :focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="help"],
body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:is(:hover, :focus-within) .workspace-drawer-vault-actions .clickable-icon[aria-label*="帮助"] {
    opacity: 1;
    max-width: 36px;
    padding-left: initial;
    padding-right: initial;
    margin-left: initial;
    margin-right: initial;
    pointer-events: auto;
}

/* [09d] Sidebar Panel Header Hover Reveal */
/* Panel actions collapse into quiet dots without width/height animation,
   preserving fast sidebar scanning. */
body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header:not(:hover):not(:focus-within) .nav-buttons-container {
    gap: 4px;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header:not(:hover):not(:focus-within) .nav-buttons-container .nav-action-button {
    padding: 2px;
    width: 4px;
    height: 4px;
    min-width: 0;
    flex: 0 0 auto;
    background-color: var(--background-modifier-hover);
    box-shadow: none;
    border-radius: 50%;
    margin: auto 0;
}

body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header:not(:hover):not(:focus-within) .nav-buttons-container .nav-action-button svg {
    width: 0;
    height: 0;
    opacity: 0;
}

body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header .nav-buttons-container,
body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header .nav-buttons-container .nav-action-button,
body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header .nav-buttons-container .nav-action-button svg {
    transition:
        opacity var(--ease-fast-smooth),
        background-color var(--ease-fast-smooth),
        color var(--ease-fast-smooth);
}

/* [09e] Window & Mobile States */
body:not(.is-mobile) .app-container .mod-sidedock {
    background-color: color-mix(in srgb, var(--layer-1) 96%, transparent);
}

body.is-tablet .workspace-drawer,
body.is-mobile .workspace-drawer {
    background-color: var(--background-secondary);
}

body.is-mobile .markdown-reading-view .markdown-preview-view {
    max-width: calc(100vw - 1rem);
    padding: var(--size-5);
    margin-block: var(--size-3);
    background: var(--background-primary);
    border-radius: var(--scrip-reading-paper-radius);
}

body.is-phone .markdown-reading-view .markdown-preview-view {
    max-width: 100%;
    padding: var(--size-4);
    margin-block: 0;
    border-radius: 0;
}

@media (hover: none) {
    body:not(.is-mobile) .app-container .status-bar {
        max-width: var(--scrip-status-expanded-width);
        justify-content: flex-start;
        padding-inline: var(--size-3);
        opacity: 0.82;
    }

    body:not(.is-mobile) .app-container .status-bar:not(:hover):not(:focus-within) .status-bar-item {
        position: static;
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }

    body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-switcher,
    body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile:not(:hover):not(:focus-within) .workspace-drawer-vault-actions .clickable-icon,
    body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header:not(:hover):not(:focus-within) .nav-buttons-container .nav-action-button {
        opacity: 1;
        max-width: none;
        width: auto;
        height: auto;
        min-width: var(--clickable-icon-size, 28px);
        padding: var(--size-1);
        margin: 0;
        pointer-events: auto;
    }

    body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header:not(:hover):not(:focus-within) .nav-buttons-container .nav-action-button svg {
        width: var(--icon-size);
        height: var(--icon-size);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-delay: 0ms;
        scroll-behavior: auto;
    }

    /* Reduced motion removes spatial movement but keeps color/opacity feedback
       so controls remain legible and stateful. */
    body:not(.is-mobile) .app-container .status-bar,
    body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher,
    body:not(.is-mobile) .app-container .mod-sidedock.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-actions .clickable-icon,
    body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header .nav-buttons-container,
    body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header .nav-buttons-container .nav-action-button,
    body:not(.is-mobile) .app-container .mod-sidedock .workspace-leaf-content .nav-header .nav-buttons-container .nav-action-button svg {
        transition-property: opacity, background-color, color, border-color, box-shadow;
    }

    .modal-container .modal {
        animation: none;
    }
}


body:not(.is-mobile) .mod-sidedock.mod-right-split .workspace-tabs:last-of-type .node-insert-event {
    padding-bottom: 36px;
}

/* [10] Buttons */
/* Buttons get tactile press feedback without hover translation; frequent
   controls should not drift while browsing. */
:where(button, .modal-button-container button) {
    border-radius: var(--radius-m);
    padding: var(--size-2) var(--size-4);
    font-weight: var(--font-medium);
    transition: var(--transition-interactive);
    cursor: pointer;
    border: var(--border-width) solid var(--border-subtle-1);
    background-color: var(--layer-1);
    color: var(--text-primary);
    box-shadow: var(--scrip-shadow-tactile);

    &:hover:not(:disabled) {
        box-shadow: var(--scrip-shadow-s);
        transform: translateY(var(--transform-translate-hover));
    }

    &:active:not(:disabled) {
        transform: scale(var(--transform-scale-pressed));
        background-color: var(--layer-active-1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    &:disabled {
        opacity: var(--opacity-half);
        cursor: not-allowed;
        pointer-events: none;
    }

    &:focus-visible {
        outline: var(--outline-width) solid var(--focus);
        outline-offset: var(--outline-offset);
    }
}

/* Suggestion rows stay flat so command/search lists remain dense and stable. */
.suggestion-item {
    border-radius: 0;
    padding: var(--size-2) var(--size-3);
    font-weight: var(--font-normal);
    transition:
        background-color var(--ease-fast-smooth),
        color var(--ease-fast-smooth);
    cursor: pointer;
    color: var(--text-primary);
    background-color: transparent;
    box-shadow: none;
}

.suggestion-item:hover:not(.is-selected) {
    background-color: var(--background-hover);
    color: var(--text-primary);
    box-shadow: none;
}

.suggestion-item.is-selected {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
}

.suggestion-container,
.menu,
.modal-container .modal,
.popover,
.tooltip {
    border-radius: var(--radius-m);
    border-color: color-mix(in srgb, var(--border-subtle-1) 82%, transparent);
}

.suggestion-container,
.menu {
    box-shadow: var(--scrip-shadow-tactile);
}

.modal-container .modal {
    box-shadow:
        0 14px 34px rgba(var(--gray-100), 0.08),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.32);
}

.menu-item {
    border-radius: var(--radius-s);
    transition:
        background-color var(--ease-fast-smooth),
        color var(--ease-fast-smooth);
}

.menu-item:hover {
    background-color: var(--background-hover);
}

/* Search uses a single-border model: the container draws the field, while the
   inner input stays transparent to avoid nested round/square boxes. */
.search-input-container {
    border: var(--border-width) solid var(--border-subtle-1);
    border-radius: var(--radius-m);
    background-color: var(--layer-1);
    box-shadow: none;
    overflow: hidden;
}

.search-input-container:focus-within {
    border-color: color-mix(in srgb, var(--interactive) 72%, var(--border-subtle-1));
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.08);
}

.search-input-container input,
.search-input-container input[type="search"],
.search-input-container .search-input {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.search-input-container input:focus,
.search-input-container input:focus-visible,
.search-input-container .search-input:focus,
.search-input-container .search-input:focus-visible {
    outline: none;
    box-shadow: none;
}

.search-result {
    border-top: var(--border-width) solid color-mix(in srgb, var(--border-subtle-1) 62%, transparent);
}

.search-result-file-matched-text {
    color: var(--text-primary);
}

/* Primary CTA buttons */
button.mod-cta,
.modal-button-container button.mod-cta,
.mod-cta:not(.workspace-leaf):not(.workspace-tab-header):not(.view-header) {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
    border-color: var(--interactive-accent);
    --input-shadow: inset 0 0 0 var(--border-width) var(--interactive-accent);
    --input-shadow-hover: inset 0 0 0 var(--border-width) var(--interactive-accent-hover);
    box-shadow:
        var(--scrip-shadow-tactile),
        var(--input-shadow);

    &:hover:not(:disabled) {
        color: var(--text-on-accent);
        border-color: var(--interactive-accent-hover);
        box-shadow:
            var(--scrip-shadow-s),
            var(--input-shadow-hover);
    }

    &:active:not(:disabled) {
        color: var(--text-on-accent);
        border-color: var(--interactive-accent-active);
        box-shadow:
            var(--scrip-shadow-tactile),
            var(--input-shadow);
    }
}

/* Secondary buttons */
:where(button.mod-secondary, .modal-button-container button.mod-secondary) {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: var(--border-subtle-1);

    &:hover:not(:disabled) {
        background-color: var(--background-hover);
        color: var(--text-primary);
        border-color: var(--border-subtle-2);
    }
}

/* Dangerous buttons */
:where(button.mod-dangerous, .modal-button-container button.mod-dangerous) {
    background-color: transparent;
    color: var(--text-error);
    border-color: var(--border-subtle-1);

    &:hover:not(:disabled) {
        background-color: rgba(var(--color-error-rgb), var(--opacity-subtle));
        border-color: rgba(var(--color-error-rgb), var(--opacity-moderate));
    }
}



/* [11] Modals */
@keyframes modal-entrance {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Physical paper base filter */
.modal-container .modal,
.menu,
.popover,
.tooltip,
.suggestion-container {
    /* Removed blur in favor of a matte physical-paper surface. */
    background-color: var(--layer-1);
    color: var(--text-normal);
}

.modal-container .modal {
    border: var(--border-width) solid var(--border-subtle-1);
    border-radius: var(--radius-l);
    /* Multi-layered ambient shadow plus inner highlight for depth. */
    box-shadow:
        var(--scrip-shadow-l),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
    .modal-container .modal {
        animation: modal-entrance var(--duration-moderate) var(--motion-apple);
    }
}

/* [11a] Floating Tooltips */
/* Tooltips are high-frequency chrome, so they stay tighter than popovers. */
.popover,
.tooltip {
    border: var(--border-width) solid var(--border-subtle-2);
    box-shadow: var(--scrip-shadow-l);
    border-radius: var(--radius-m);
    transition: var(--transition-fast-ease);
}

.popover {
    padding: var(--size-3);
}

.tooltip {
    padding: var(--size-2) var(--size-3);
}

/* Writing Components ================================================= */


/* [13] Callouts
   Custom Obsidian callouts follow SCRIPTORIUM's paper metaphor,
   using side color bars and soft backgrounds to create a sticky-note feel
   while staying aligned with the accent and secondary palette. */

/* Callout base structure */
.callout {
    --callout-default-rgb: var(--gray-60);

    /* Info uses the warm secondary green. */
    --callout-info-rgb: var(--color-secondary-rgb);

    /* Success reuses the soft green success tone. */
    --callout-success-rgb: var(--color-success-rgb);

    /* Important examples reuse the accent orange. */
    --callout-accent-rgb: var(--color-accent-rgb);

    /* Warnings reuse the yellow-orange warning tone. */
    --callout-warning-rgb: var(--color-warning-rgb);

    /* Errors reuse the red-orange error tone. */
    --callout-danger-rgb: var(--color-error-rgb);

    /* Quotes use a warm gray-brown. */
    --callout-quote-rgb: var(--gray-50);

    /* Questions use a golden brown accent. */
    --callout-question-rgb: 190, 140, 80;

    --callout-radius: var(--radius-m);
    --callout-padding: var(--size-4);
    --callout-bg-opacity: 0.055;
    --callout-border-opacity: 0.28;
    --callout-title-weight: var(--font-semibold);
    --callout-color: var(--callout-default-rgb);
    --callout-icon-column: calc(var(--icon-size) + var(--size-2));
    /* Ordinary callouts stay flat; semantic warning/danger variants opt into
       a very light shadow below in the style mapping section. */
    --callout-shadow: none;
    --callout-shadow-hover: none;

    background-color: color-mix(in srgb, var(--panel-surface) 95%, rgba(var(--callout-color), var(--callout-bg-opacity)));
    border: var(--border-width) solid color-mix(in srgb, var(--paper-frame-border) 64%, rgba(var(--callout-color), 0.18));
    border-left: var(--indicator-width-wide) solid rgba(var(--callout-color), var(--callout-border-opacity));
    border-radius: var(--callout-radius);
    padding: 0;
    margin: var(--size-5) 0;
    overflow: hidden;
    transition: border-color var(--ease-fast-smooth);
    box-shadow: var(--callout-shadow);
}

.callout:hover {
    border-color: color-mix(in srgb, var(--paper-frame-border) 50%, rgba(var(--callout-color), 0.24));
    box-shadow: var(--callout-shadow-hover);
}

/* Callout title line */
.callout-title {
    display: flex;
    align-items: flex-start;
    padding: var(--size-1) var(--callout-padding);
    gap: var(--size-2);
    min-width: 0;
    line-height: var(--line-height-relaxed);
    font-weight: var(--callout-title-weight);
    font-size: 1em;
    letter-spacing: 0;
    color: var(--scrip-ink-strong);
    background:
        linear-gradient(90deg,
            rgba(var(--callout-color), 0.03),
            transparent 82%);
    border-bottom: var(--border-width) solid color-mix(in srgb, rgba(var(--callout-color), 0.12) 58%, transparent);
}

.callout-title .callout-icon {
    flex: 0 0 auto;
    width: var(--icon-size);
    margin-top: 0.36em;
    color: color-mix(in srgb, rgb(var(--callout-color)) 58%, var(--scrip-ink-soft));
    opacity: 0.82;
}

.callout-title .callout-title-inner {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: pretty;
}

.callout-title .callout-title-inner p {
    margin: 0;
}

.callout-title .callout-fold {
    flex: 0 0 auto;
    margin-inline-start: auto;
    margin-top: 0.36em;
    opacity: var(--opacity-half);
    transition: transform var(--ease-moderate-smooth),
        opacity var(--ease-fast-smooth);
}

.callout-title:hover .callout-fold {
    opacity: 0.8;
}

/* Callout content area */
.callout-content {
    min-width: 0;
    padding: var(--size-2) var(--callout-padding) var(--callout-padding) calc(var(--callout-padding) + var(--callout-icon-column));
    color: var(--scrip-ink-strong);
    line-height: var(--line-height-relaxed);
    background: transparent;
}

.callout-content>*:first-child {
    margin-top: 0;
}

.callout-content>*:last-child {
    margin-bottom: 0;
}

.callout-content>p:last-child {
    margin-bottom: 0;
}

.callout-content>p {
    margin-block-end: calc(var(--paragraph-spacing-tight) * 0.72);
}

.markdown-source-view.mod-cm6 .cm-callout .callout {
    margin: 0;
}

.markdown-source-view.mod-cm6 .HyperMD-callout.cm-line {
    margin-block-end: 0;
    line-height: var(--line-height-relaxed);
}

.markdown-source-view.mod-cm6 .HyperMD-callout :is(.cm-quote, .cm-formatting-quote) {
    font-style: normal;
    color: inherit;
}

/* Callout style mappings */

/* Note and info variants */
.callout[data-callout="note"],
.callout[data-callout="info"],
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"],
.callout[data-callout="todo"] {
    --callout-color: var(--callout-info-rgb);
}

/* Success-oriented variants */
.callout[data-callout="tip"],
.callout[data-callout="hint"],
.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
    --callout-color: var(--callout-success-rgb);
}

/* Important and example variants */
.callout[data-callout="important"],
.callout[data-callout="example"] {
    --callout-color: var(--callout-accent-rgb);
    --callout-shadow: 0 10px 24px rgba(var(--gray-100), 0.035);
    --callout-shadow-hover: 0 12px 28px rgba(var(--gray-100), 0.04);
}

/* Warning and caution variants */
.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"] {
    --callout-color: var(--callout-warning-rgb);
    --callout-shadow: 0 10px 24px rgba(var(--gray-100), 0.035);
    --callout-shadow-hover: 0 12px 28px rgba(var(--gray-100), 0.04);
}

/* Danger and error variants */
.callout[data-callout="danger"],
.callout[data-callout="error"],
.callout[data-callout="bug"],
.callout[data-callout="failure"],
.callout[data-callout="fail"],
.callout[data-callout="missing"] {
    --callout-color: var(--callout-danger-rgb);
    --callout-shadow: 0 10px 24px rgba(var(--gray-100), 0.035);
    --callout-shadow-hover: 0 12px 28px rgba(var(--gray-100), 0.04);
}

/* Quote variants */
.callout[data-callout="quote"],
.callout[data-callout="cite"] {
    --callout-color: var(--callout-quote-rgb);
    font-style: italic;
}

/* Question variants */
.callout[data-callout="question"],
.callout[data-callout="faq"],
.callout[data-callout="help"] {
    --callout-color: var(--callout-question-rgb);
}

/* Nested callouts */
.callout .callout {
    margin: var(--size-3) 0;
    border-left-width: var(--indicator-width);
}

/* [14] Embedded Notes */
/* Embeds share the paper material without adding another shadow layer. */
.markdown-embed,
.markdown-preview-view .internal-embed {
    border: var(--border-width) solid var(--scrip-native-rule);
    border-radius: var(--radius-m);
    background-color: var(--scrip-native-surface);
    box-shadow: none;
}

.markdown-embed-content {
    padding: var(--size-3);
}

/* [14a] Embedded Context Alignment */
.markdown-preview-view :is(li p, blockquote p, .callout-content p, .markdown-embed p, td p, th p) {
    text-align: start;
}