@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500;1,6..72,600&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================================
   ANTHROPIC TOUCH — an Obsidian theme
   Warm cream paper · coral accent · serif display headings · multi-variant
   cards / infobox / tags / headings. Light-first, warm dark variant.
   Token namespace: --at-*  (sibling theme MyWiki Glass uses --mwg-*)
   ========================================================================== */







body.theme-light {
    --at-accent: #d8552f;
    --at-accent-rgb: 216, 85, 47;
    --at-accent-2: #b8442a;
    --at-gold: #b07d20;
    --at-danger: #c0392b;

    --at-bg-0: #ece3d0;
    --at-bg-grad-a: #f1ebda;
    --at-bg-grad-b: #e6dcc6;
    --at-ribbon: #e6dcc6;
    --at-pane: #efe7d6;
    --at-pane-2: #f6f1e6;
    --at-editor: #f7f1e4;
    --at-raised: #fbf7ee;

    --at-text: #3a352c;
    --at-text-strong: #1f1b14;
    --at-muted: #8a7f6d;
    --at-faint: #b3a892;

    --at-dark-surface: #241d15;
    --at-on-dark: #ece4d4;
    --at-on-dark-muted: #d3c7af;
    --at-accent-surface: #ea6a51;       
    --at-on-accent: #1a1208;            
    --at-on-accent-em: #f7eed9;         
    --at-on-accent-kick: #1a1208;       
    --at-accent-btn-bg: #1a1208;        
    --at-accent-btn-fg: #f5efe1;
    --at-accent-nested: #18130d;        
    --at-accent-nested-h: #f5efe1;      
    --at-accent-nested-p: #d3c7af;      

    --at-code-fg: #b8442a;
    --at-th-bg: linear-gradient(180deg, #efe7d6, #e6dcc6);
    --at-shadow-pop: 0 1px 2px rgba(60, 45, 25, 0.08), 0 18px 44px rgba(60, 45, 25, 0.14);
    --at-scrim: rgba(31, 27, 20, 0.5);
    --at-graph: #6b4a32;
    --at-graph-line: rgba(31, 27, 20, 0.18);

    --at-h1: #1f1b14;
    --at-h2: #1f1b14;
    --at-h3: #2a241a;
    --at-h4: #3a352c;
    --at-h5: #4a4438;
    --at-h6: #8a7f6d;
    --at-bold-color: #1f1b14;
    --at-italic-color: var(--at-accent);        
    --at-bold-italic-color: var(--at-accent);
    --at-strikethrough-color: #8a7f6d;

    color-scheme: light;
}

body.theme-dark {
    --at-accent: #e8714c;
    --at-accent-rgb: 232, 113, 76;
    --at-accent-2: #d2603f;
    --at-gold: #d9a441;
    --at-danger: #e0623f;

    
    --at-bg-0: #18130d;
    --at-bg-grad-a: #221b13;
    --at-bg-grad-b: #130f0a;
    --at-ribbon: #120f0a;
    --at-pane: #221b13;
    --at-pane-2: #2a2218;        
    --at-editor: #1c1710;        
    --at-raised: #342a1c;

    --at-text: #e7ddc8;
    --at-text-strong: #f5efe1;
    --at-muted: #a99e87;
    --at-faint: #6f6555;

    --at-dark-surface: #231d14;
    --at-on-dark: #f5efe1;
    --at-on-dark-muted: #d3c7af;
    
    --at-accent-surface: #1f1810;       
    --at-on-accent: #f5efe1;            
    --at-on-accent-em: var(--at-accent); 
    --at-on-accent-kick: var(--at-accent); 
    --at-accent-btn-bg: var(--at-accent); 
    --at-accent-btn-fg: #ffffff;
    --at-accent-nested: #2c2418;        
    --at-accent-nested-h: #f5efe1;
    --at-accent-nested-p: #d3c7af;

    --at-code-fg: #f0a07f;
    --at-th-bg: linear-gradient(180deg, #2a2317, #211c14);
    --at-shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.5), 0 22px 56px rgba(0, 0, 0, 0.66);
    --at-scrim: rgba(10, 8, 5, 0.66);
    --at-graph: #d8c8aa;
    --at-graph-line: rgba(231, 221, 200, 0.16);

    --at-h1: #f5efe1;
    --at-h2: #f5efe1;
    --at-h3: #e7ddc8;
    --at-h4: #d4c9b0;
    --at-h5: #c2b69b;
    --at-h6: #a99e87;
    --at-bold-color: #f5efe1;
    --at-italic-color: var(--at-accent);        
    --at-bold-italic-color: var(--at-accent);
    --at-strikethrough-color: #a99e87;

    color-scheme: dark;
}


body {
    --at-accent-soft: color-mix(in srgb, var(--at-accent) 14%, transparent);
    --at-accent-line: color-mix(in srgb, var(--at-accent) 55%, transparent);
    --at-code-bg: color-mix(in srgb, var(--at-accent) 12%, transparent);
    --at-chip-bg: color-mix(in srgb, var(--at-accent) 14%, transparent);
    --at-border: color-mix(in srgb, var(--at-text-strong) 10%, transparent);
    --at-border-2: color-mix(in srgb, var(--at-text-strong) 16%, transparent);
    --at-border-strong: color-mix(in srgb, var(--at-text-strong) 26%, transparent);
    --at-on-dark-border: rgba(245, 239, 225, 0.12);

    
    --at-tag-blue: #5b87c5;
    --at-tag-green: #5a9e6a;
    --at-tag-amber: #c08a2e;
    --at-tag-rose: #c75c6a;

    
    --at-callout-note: var(--at-accent);
    --at-callout-tip: #5a9e6a;
    --at-callout-warning: var(--at-gold);
    --at-callout-question: var(--at-gold);
    --at-callout-danger: var(--at-danger);
    --at-callout-example: #9a6b8e;
    --at-callout-quote: var(--at-accent-2);

    
    --at-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --at-font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
    --at-font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

    
    --h1-color: var(--at-h1);
    --h2-color: var(--at-h2);
    --h3-color: var(--at-h3);
    --h4-color: var(--at-h4);
    --h5-color: var(--at-h5);
    --h6-color: var(--at-h6);
    --bold-color: var(--at-bold-color);
    --italic-color: var(--at-italic-color);
    --bold-italic-color: var(--at-bold-italic-color);
    --strikethrough-color: var(--at-strikethrough-color);

    
    --at-radius: 12px;
    --at-scrollbar: 6px;
    --radius-s: calc(var(--at-radius) - 4px);
    --radius-m: var(--at-radius);
    --radius-l: calc(var(--at-radius) + 4px);

    
    --at-para-spacing: 12px;
    --at-heading-letter-spacing: -0.01em;

    
    --at-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --at-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --at-dur-fast: 150ms;
    --at-dur: 240ms;
    --at-dur-slow: 360ms;

    
    --background-primary: var(--at-editor);
    --background-primary-alt: var(--at-pane-2);
    --background-secondary: var(--at-pane);
    --background-secondary-alt: var(--at-pane-2);
    --background-modifier-border: var(--at-border);
    --background-modifier-border-hover: var(--at-border-2);
    --background-modifier-border-focus: var(--at-border-strong);
    --background-modifier-hover: var(--at-accent-soft);
    --background-modifier-active-hover: var(--at-accent-soft);
    --background-modifier-form-field: var(--at-pane-2);
    --background-modifier-flair: var(--at-accent);

    --text-normal: var(--at-text);
    --text-muted: var(--at-muted);
    --text-faint: var(--at-faint);
    --text-on-accent: #fbf7ee;
    --text-accent: var(--at-accent);
    --text-accent-hover: var(--at-accent-2);
    --text-selection: var(--at-accent-soft);
    --text-highlight-bg: color-mix(in srgb, var(--at-gold) 32%, transparent);

    --interactive-normal: var(--at-pane-2);
    --interactive-hover: var(--at-raised);
    --interactive-accent: var(--at-accent);
    --interactive-accent-hover: color-mix(in srgb, var(--at-accent) 82%, white);

    --code-background: var(--at-code-bg);
    --code-normal: var(--at-code-fg);

    --titlebar-background: var(--at-ribbon);
    --titlebar-background-focused: var(--at-ribbon);
    --titlebar-text-color: var(--at-muted);
    --titlebar-border-width: 0;

    --tab-background-active: var(--at-editor);
    --tab-outline-color: var(--at-border);
    --tab-text-color: var(--at-muted);
    --tab-text-color-active: var(--at-text-strong);
    --tab-text-color-focused-active-current: var(--at-text-strong);
    --ribbon-background: var(--at-ribbon);
    --nav-item-color: var(--at-text);
    --nav-item-color-hover: var(--at-text-strong);
    --nav-item-color-active: var(--at-text-strong);
    --nav-item-background-hover: var(--at-accent-soft);
    --nav-item-background-active: var(--at-accent-soft);
    --nav-indentation-guide-color: var(--at-border-2);

    --status-bar-background: var(--at-pane);
    --status-bar-text-color: var(--at-muted);
    --status-bar-border-color: var(--at-border);

    --divider-color: var(--at-border);
    --scrollbar-thumb-bg: var(--at-border-strong);
    --scrollbar-active-thumb-bg: var(--at-muted);
    --scrollbar-bg: transparent;

    --table-header-background: var(--at-th-bg);
    --table-border-color: var(--at-border-2);
    --hr-color: var(--at-border-2);
    --blockquote-border-color: var(--at-accent);
    --blockquote-background-color: var(--at-accent-soft);

    --shadow-s: 0 2px 8px -4px rgba(60, 45, 25, 0.3);
    --shadow-l: var(--at-shadow-pop);

    --link-color: var(--at-accent);
    --link-color-hover: var(--at-accent-2);
    --link-unresolved-color: var(--at-danger);

    --font-text-theme: var(--at-font-body);
    --font-interface-theme: var(--at-font-body);
    --font-monospace-theme: var(--at-font-mono);

    --file-line-width: 760px;
    --bold-weight: 700;

    --inline-title-size: 42px;
    --inline-title-weight: 500;
    --at-heading-weight: 500;
    --h1-size: 2em;
    --h2-size: 1.55em;
    --h3-size: 1.3em;
    --h4-size: 1.12em;
    --h5-size: 1em;
    --h6-size: 0.9em;
    --h1-weight: var(--at-heading-weight);
    --h2-weight: var(--at-heading-weight);
    --h3-weight: calc(var(--at-heading-weight) + 100);
    --h4-weight: calc(var(--at-heading-weight) + 100);
    --h5-weight: calc(var(--at-heading-weight) + 100);
    --h6-weight: calc(var(--at-heading-weight) + 100);
}


body.at-system-fonts {
    --at-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --at-font-heading: Georgia, "Times New Roman", serif;
    --at-font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}



body {
    font-family: var(--at-font-body);
    -webkit-font-smoothing: antialiased;
}

.workspace,
.app-container,
body { background-color: var(--at-bg-0); }

.workspace {
    background:
        radial-gradient(120% 90% at 80% -10%, color-mix(in srgb, var(--at-accent) 7%, transparent), transparent 55%),
        var(--at-bg-0);
}

::selection {
    background: var(--at-accent-soft);
    color: var(--at-text-strong);
}

::-webkit-scrollbar { width: var(--at-scrollbar); height: var(--at-scrollbar); }
::-webkit-scrollbar-thumb {
    background: var(--at-border-strong);
    border-radius: 99px;
    border: 1px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--at-muted); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }



.workspace-ribbon {
    background: var(--at-ribbon);
    border: none;
}
.workspace-ribbon::before { border: none; }
.side-dock-ribbon-action:hover { color: var(--at-accent); }

.workspace-tab-header-container { background: var(--at-bg-0); border-bottom: 1px solid var(--at-border); }
.workspace-tab-header { color: var(--at-muted); }
.workspace-tab-header.is-active { color: var(--at-text-strong); }
.workspace-tab-header.is-active .workspace-tab-header-inner {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--at-accent), var(--at-accent-2)) 1;
}

.workspace-leaf-content[data-type="markdown"] { background: var(--at-editor); }

.workspace-split.mod-left-split,
.workspace-split.mod-right-split { background: var(--at-pane); }
.nav-files-container { background: transparent; }

.tree-item-self.is-clickable:hover { background: var(--at-accent-soft); border-radius: var(--radius-s); }
.nav-file-title.is-active,
.tree-item-self.is-active {
    background: var(--at-accent-soft);
    border-radius: var(--radius-s);
    box-shadow: inset 2px 0 0 var(--at-accent);
}
.nav-folder-title-content { color: var(--at-gold); }

.status-bar { background: var(--at-pane); border-top: 1px solid var(--at-border); }


.graph-view.color-fill { color: var(--at-graph); }
.graph-view.color-line { color: var(--at-graph-line); }
.graph-view.color-circle { color: var(--at-accent); }





.inline-title,
.markdown-preview-view :is(h1, h2, h3, h4, h5, h6),
.markdown-reading-view :is(h1, h2, h3, h4, h5, h6),
.HyperMD-header,
.cm-line.HyperMD-header {
    font-family: var(--at-font-heading);
}

.inline-title {
    font-size: var(--inline-title-size);
    font-weight: var(--inline-title-weight);
    color: var(--at-text-strong);
    letter-spacing: -0.018em;
    line-height: 1.08;
    text-wrap: balance;
    margin-bottom: 14px;
}

.markdown-preview-view :is(h1, h2, h3, h4, h5, h6),
.markdown-reading-view :is(h1, h2, h3, h4, h5, h6),
.markdown-source-view .HyperMD-header {
    letter-spacing: var(--at-heading-letter-spacing);
}


.cm-header-1, .markdown-preview-view h1, .markdown-reading-view h1 { color: var(--h1-color); }
.cm-header-2, .markdown-preview-view h2, .markdown-reading-view h2 { color: var(--h2-color); }
.cm-header-3, .markdown-preview-view h3, .markdown-reading-view h3 { color: var(--h3-color); }
.cm-header-4, .markdown-preview-view h4, .markdown-reading-view h4 { color: var(--h4-color); }
.cm-header-5, .markdown-preview-view h5, .markdown-reading-view h5 { color: var(--h5-color); }
.cm-header-6, .markdown-preview-view h6, .markdown-reading-view h6 { color: var(--h6-color); }


.markdown-rendered :is(h1, h2, h3, h4, h5, h6) em,
.markdown-source-view .HyperMD-header .cm-em {
    color: var(--at-accent);
    font-style: italic;
}



body.at-head-serif :is(.markdown-preview-view, .markdown-reading-view) :is(h1, h2),
body.at-head-serif .HyperMD-header-1,
body.at-head-serif .HyperMD-header-2 {
    padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--at-accent) 45%, transparent);
}

body.at-head-underline :is(.markdown-preview-view, .markdown-reading-view) :is(h1, h2, h3) {
    padding-bottom: 6px;
    border-bottom: 2px solid var(--at-accent);
}

body.at-head-mono :is(.markdown-preview-view, .markdown-reading-view) :is(h1, h2, h3, h4, h5, h6),
body.at-head-mono .HyperMD-header {
    font-family: var(--at-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--at-accent);
    font-weight: 500;
}
body.at-head-mono :is(.markdown-preview-view, .markdown-reading-view) :is(h1, h2, h3, h4, h5, h6) em { letter-spacing: 0.12em; }



body.at-halign-center :is(.markdown-preview-view, .markdown-reading-view) :is(h1, h2, h3, h4, h5, h6),
body.at-halign-center .markdown-source-view .HyperMD-header { text-align: center; }
body.at-halign-right :is(.markdown-preview-view, .markdown-reading-view) :is(h1, h2, h3, h4, h5, h6),
body.at-halign-right .markdown-source-view .HyperMD-header { text-align: right; }
.markdown-preview-view :is(h1, h2, h3, h4, h5, h6):has(a.tag[href="#center" i]),
.markdown-reading-view :is(h1, h2, h3, h4, h5, h6):has(a.tag[href="#center" i]) { text-align: center; }
.markdown-preview-view :is(h1, h2, h3, h4, h5, h6):has(a.tag[href="#right" i]),
.markdown-reading-view :is(h1, h2, h3, h4, h5, h6):has(a.tag[href="#right" i]) { text-align: right; }
.markdown-preview-view :is(h1, h2, h3, h4, h5, h6):has(a.tag[href="#left" i]),
.markdown-reading-view :is(h1, h2, h3, h4, h5, h6):has(a.tag[href="#left" i]) { text-align: left; }
:is(h1, h2, h3, h4, h5, h6) a.tag[href="#center" i],
:is(h1, h2, h3, h4, h5, h6) a.tag[href="#right" i],
:is(h1, h2, h3, h4, h5, h6) a.tag[href="#left" i] { display: none; }


.markdown-rendered p { margin-block: 0 var(--at-para-spacing); }
.markdown-rendered { line-height: var(--line-height-normal, 1.6); }

.markdown-rendered :is(ul, ol) {
    padding-inline-start: 1.7em;
    list-style-position: outside;
    margin: 0.4em 0;
}
.markdown-rendered ul { list-style-type: disc; }
.markdown-rendered ul ul { list-style-type: circle; }
.markdown-rendered ul ul ul { list-style-type: square; }
.markdown-rendered ol { list-style-type: decimal; }
.markdown-rendered :is(ul, ol) > li { display: list-item; margin: 0.3em 0; }
.markdown-rendered ul > li::marker { color: var(--at-accent); }

.markdown-rendered ol > li::marker { color: var(--at-accent); font-family: var(--at-font-mono); font-weight: 600; }
.markdown-source-view.mod-cm6 .cm-formatting-list { color: var(--at-accent); }

.markdown-rendered li.task-list-item { list-style-type: none; }
.markdown-rendered input[type="checkbox"] { accent-color: var(--at-accent); }


.markdown-preview-view,
.markdown-reading-view .markdown-preview-sizer,
.markdown-source-view .cm-content { font-size: var(--font-text-size); }


:is(.markdown-preview-view, .markdown-source-view, .markdown-reading-view).text-sm { --font-text-size: 14px; }
:is(.markdown-preview-view, .markdown-source-view, .markdown-reading-view).text-md { --font-text-size: 16px; }
:is(.markdown-preview-view, .markdown-source-view, .markdown-reading-view).text-lg { --font-text-size: 18px; }
:is(.markdown-preview-view, .markdown-source-view, .markdown-reading-view).text-xl { --font-text-size: 20px; }


.markdown-rendered strong, .cm-strong { color: var(--bold-color); font-weight: var(--bold-weight); }
.markdown-rendered em, .cm-em { color: var(--italic-color); }
.markdown-rendered del, .cm-strikethrough { color: var(--strikethrough-color); }
.markdown-rendered mark { background: var(--text-highlight-bg); color: var(--at-text-strong); border-radius: 3px; }


.markdown-rendered a:not(.tag),
.cm-hmd-internal-link, .cm-link {
    color: var(--at-accent);
    text-decoration: none;
    background-image:
        linear-gradient(var(--at-accent-2), var(--at-accent-2)),
        linear-gradient(color-mix(in srgb, var(--at-accent) 32%, transparent), color-mix(in srgb, var(--at-accent) 32%, transparent));
    background-size: 0% 1.5px, 100% 1px;
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 1.5px;
    transition: color var(--at-dur-fast), background-size var(--at-dur) var(--at-ease);
}
.markdown-rendered a:not(.tag):hover { color: var(--at-accent-2); background-size: 100% 1.5px, 100% 1px; }


:is(.markdown-rendered a, .markdown-rendered input[type="checkbox"],
    .markdown-rendered button, button.mod-cta, .clickable-icon, a.tag):focus-visible {
    outline: 2px solid var(--at-accent);
    outline-offset: 2px;
    border-radius: var(--radius-s);
}


.markdown-rendered code {
    background: var(--at-code-bg);
    color: var(--at-code-fg);
    border-radius: 5px;
    padding: 0.1em 0.4em;
    font-size: 0.88em;
}
.markdown-rendered pre {
    background: var(--at-dark-surface);
    border: 1px solid var(--at-on-dark-border);
    border-radius: var(--radius-m);
}
.markdown-rendered pre code { color: var(--at-on-dark); background: none; }
button.copy-code-button {
    background: var(--at-accent);
    color: #fff;
    border-radius: 6px;
    font-family: var(--at-font-mono);
    font-size: 0.7em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.markdown-rendered table { border-collapse: collapse; border-radius: var(--radius-m); overflow: hidden; }
.markdown-rendered th {
    background: var(--at-pane);
    color: var(--at-text-strong);
    font-family: var(--at-font-mono);
    font-size: 0.78em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--at-border-2);
}
.markdown-rendered td { border-top: 1px solid var(--at-border); }


.tag, a.tag {
    background: var(--at-chip-bg);
    color: var(--at-code-fg);
    border: none;
    border-radius: 99px;
    padding: 2px 10px;
    font-size: 0.82em;
    font-weight: 500;
    transition: transform 160ms, background 160ms, color 160ms;
}
.tag:hover { transform: translateY(-2px); }


body.at-tag-outline .tag, body.at-tag-outline a.tag {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--at-accent) 50%, transparent);
    color: var(--at-accent);
}

body.at-tag-mono .tag, body.at-tag-mono a.tag {
    background: transparent;
    padding: 0;
    border-radius: 0;
    color: var(--at-accent);
    font-family: var(--at-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.74em;
}
body.at-tag-mono a.tag::before { content: "# "; opacity: 0.5; }

body.at-tag-underline .tag, body.at-tag-underline a.tag {
    background: transparent;
    border-radius: 0;
    padding: 0 1px;
    color: var(--at-accent);
    border-bottom: 1px solid var(--at-accent);
}


a.tag[href="#Cloud" i], a.tag[href="#CloudEngineering" i], a.tag[href="#AWS" i],
a.tag[href="#Azure" i], a.tag[href="#GCP" i], a.tag[href="#Architecture" i] {
    background: color-mix(in srgb, var(--at-tag-blue) 18%, transparent);
    color: color-mix(in srgb, var(--at-tag-blue) 72%, var(--at-text-strong));
}
a.tag[href="#DataEngineering" i], a.tag[href="#ETL" i], a.tag[href="#Pipelines" i],
a.tag[href="#Spark" i], a.tag[href="#Streaming" i], a.tag[href="#Analytics" i] {
    background: color-mix(in srgb, var(--at-tag-green) 18%, transparent);
    color: color-mix(in srgb, var(--at-tag-green) 70%, var(--at-text-strong));
}
a.tag[href="#Storage" i], a.tag[href="#Database" i], a.tag[href="#SQL" i],
a.tag[href="#NoSQL" i], a.tag[href="#Lakehouse" i], a.tag[href="#Modeling" i] {
    background: color-mix(in srgb, var(--at-tag-amber) 20%, transparent);
    color: color-mix(in srgb, var(--at-tag-amber) 72%, var(--at-text-strong));
}
a.tag[href="#person" i], a.tag[href="#book" i], a.tag[href="#Guide" i],
a.tag[href="#Theory" i], a.tag[href="#index" i], a.tag[href="#python" i] {
    background: color-mix(in srgb, var(--at-tag-rose) 18%, transparent);
    color: color-mix(in srgb, var(--at-tag-rose) 70%, var(--at-text-strong));
}


.metadata-container { border: none; border-top: 1px solid var(--at-border); padding-top: 8px; }
.metadata-property-key { color: var(--at-muted); font-family: var(--at-font-mono); font-size: 0.82em; }




.markdown-rendered .at-kicker {
    font-family: var(--at-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.74em;
    font-weight: 500;
    color: var(--at-accent);
}
.markdown-rendered .at-kicker::before { content: "● "; font-size: 0.8em; vertical-align: 0.1em; }
.markdown-rendered .at-kicker.no-dot::before { content: none; }


.markdown-rendered .at-badge {
    display: inline-block;
    font-family: var(--at-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72em;
    font-weight: 500;
    background: var(--at-accent);
    color: #fff;
    padding: 3px 10px;
    border-radius: 5px;
    line-height: 1.5;
}

.markdown-rendered .at-badge.ghost {
    background: transparent;
    color: var(--at-accent);
    border: 1px solid color-mix(in srgb, var(--at-accent) 50%, transparent);
}


.markdown-rendered .at-display {
    font-family: var(--at-font-heading);
    font-weight: 500;
    font-size: 1.55em;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--at-text-strong);
}
.markdown-rendered .at-display em { color: var(--at-accent); font-style: italic; }


.markdown-rendered .at-lead {
    font-size: 1.15em;
    line-height: 1.6;
    color: var(--at-muted);
}


.markdown-rendered .at-stat {
    font-family: var(--at-font-heading);
    font-weight: 600;
    font-size: 1.5em;
    color: var(--at-accent);
    line-height: 1;
}


.markdown-rendered .at-mark {
    background: color-mix(in srgb, var(--at-accent) 16%, transparent);
    color: var(--at-text-strong);
    border-radius: 4px;
    padding: 0.05em 0.3em;
}


.markdown-rendered .at-xs  { font-size: 0.72em; }
.markdown-rendered .at-sm  { font-size: 0.85em; }
.markdown-rendered .at-md  { font-size: 1em; }
.markdown-rendered .at-lg  { font-size: 1.25em; }
.markdown-rendered .at-xl  { font-size: 1.5em; }
.markdown-rendered .at-2xl { font-size: 2em; line-height: 1.15; }
.markdown-rendered .at-3xl { font-size: 2.75em; line-height: 1.1; }
.markdown-rendered .at-4xl { font-size: 3.6em; line-height: 1.05; }

.markdown-rendered .at-fs { font-size: var(--fs, 1em); }



.markdown-rendered blockquote,
.markdown-source-view .HyperMD-quote {
    border: none;
    border-left: 3px solid var(--at-accent);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--at-accent) 16%, var(--at-pane-2)),
        color-mix(in srgb, var(--at-accent) 5%, var(--at-pane-2))
    );
    padding: 12px 18px;
    font-style: italic;
    color: var(--at-text-strong);
}

.markdown-rendered blockquote cite,
.markdown-rendered blockquote .cm-cite {
    display: block;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--at-accent) 20%, transparent);
    font-style: normal;
    font-family: var(--at-font-mono);
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
    color: var(--at-accent);
}
.markdown-rendered blockquote cite::before { content: "— "; opacity: 0.65; }



.callout {
    --cc: rgb(var(--callout-color));
    border-radius: var(--radius-m);
    border: 1px solid var(--at-border-2);
    border-left: 3px solid var(--cc);
    background: color-mix(in srgb, var(--cc) 8%, var(--at-pane-2));
    transition: transform 200ms var(--at-ease), box-shadow 200ms, border-color 200ms;
}
.callout:hover { box-shadow: var(--at-shadow-pop); border-color: var(--at-border-strong); }
.callout-icon .svg-icon { color: var(--cc); }

.callout[data-callout="note"],
.callout[data-callout="abstract"],
.callout[data-callout="info"]      { --cc: var(--at-callout-note); }
.callout[data-callout="tip"],
.callout[data-callout="success"],
.callout[data-callout="check"]     { --cc: var(--at-callout-tip); }
.callout[data-callout="warning"],
.callout[data-callout="caution"]   { --cc: var(--at-callout-warning); }
.callout[data-callout="question"],
.callout[data-callout="help"]      { --cc: var(--at-callout-question); }
.callout[data-callout="failure"],
.callout[data-callout="danger"],
.callout[data-callout="error"],
.callout[data-callout="bug"]       { --cc: var(--at-callout-danger); }
.callout[data-callout="example"]   { --cc: var(--at-callout-example); }
.callout[data-callout="quote"],
.callout[data-callout="cite"]      { --cc: var(--at-callout-quote); }


.callout:not([data-callout="card"]):not([data-callout="grid"]):not([data-callout="infobox"]) > .callout-title {
    padding: 4px 2px;
    gap: 8px;
}
.callout:not([data-callout="card"]):not([data-callout="grid"]):not([data-callout="infobox"]) > .callout-title .callout-title-inner {
    font-family: var(--at-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8em;
    font-weight: 600;
    color: var(--cc);
}
.callout:not([data-callout="card"]):not([data-callout="grid"]):not([data-callout="infobox"]) .callout-content > :first-child { margin-top: 0; }





.callout[data-callout="grid"] {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 1.4em 0;
}
.callout[data-callout="grid"] > .callout-content { background: none !important; padding: 0 !important; }
.callout[data-callout="grid"] > .callout-title { display: none; }
.callout[data-callout="grid"] > .callout-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--at-card-min, 260px), 1fr));
    column-gap: var(--at-grid-gap, 1.3rem);
    row-gap: var(--at-grid-row-gap, var(--at-grid-gap, 1.3rem));
    padding: 0;
    align-items: stretch;
}

.callout[data-callout="grid"] > .callout-content > .callout { margin: 0 !important; }
.callout[data-callout="grid"][data-callout-metadata*="cols2"] > .callout-content { grid-template-columns: repeat(2, 1fr); }
.callout[data-callout="grid"][data-callout-metadata*="cols3"] > .callout-content { grid-template-columns: repeat(3, 1fr); }
.callout[data-callout="grid"][data-callout-metadata*="cols4"] > .callout-content { grid-template-columns: repeat(4, 1fr); }
.callout[data-callout="grid"][data-callout-metadata*="cols5"] > .callout-content { grid-template-columns: repeat(5, 1fr); }
.callout[data-callout="grid"][data-callout-metadata*="cols6"] > .callout-content { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 700px) {
    .callout[data-callout="grid"] > .callout-content { grid-template-columns: 1fr; }
}

.callout[data-callout="grid"] > .callout-content > p:empty,
.callout[data-callout="grid"] > .callout-content > br { display: none; }


.callout[data-callout="card"][data-callout-metadata*="span2"] { grid-column: span 2; }
.callout[data-callout="card"][data-callout-metadata*="span3"] { grid-column: span 3; }
.callout[data-callout="card"][data-callout-metadata*="spanfull"] { grid-column: 1 / -1; }


.callout[data-callout="card"] {
    --cc: var(--at-accent);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--at-border-2);
    border-radius: var(--radius-l);
    background: var(--at-pane-2);
    box-shadow: var(--at-shadow-pop);
    padding: 2px 4px 6px;
    overflow: hidden;
    transition: transform var(--at-dur) var(--at-ease), box-shadow var(--at-dur) var(--at-ease), border-color var(--at-dur) var(--at-ease);
    animation: at-rise var(--at-dur-slow) var(--at-ease);
}
.callout[data-callout="card"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 4px rgba(60, 45, 25, 0.10), 0 26px 60px rgba(60, 45, 25, 0.22);
    border-color: color-mix(in srgb, var(--at-accent) 40%, var(--at-border-2));
}
.callout[data-callout="card"] > .callout-title { padding: 14px 20px 0; align-items: flex-start; }
.callout[data-callout="card"] .callout-icon { display: none; }
.callout[data-callout="card"] .callout-title-inner {
    font-family: var(--at-font-heading);
    font-weight: 500;
    font-size: 1.7em;
    line-height: 1.12;
    letter-spacing: -0.012em;
    color: var(--at-text-strong);
}
.callout[data-callout="card"] .callout-title-inner em { color: var(--at-accent); font-style: italic; }
.callout[data-callout="card"] > .callout-content { padding: 6px 20px 16px; flex: 1; overflow: visible; }

.callout[data-callout="card"] > .callout-content > pre { overflow-x: auto; }
.callout[data-callout="card"] > .callout-content > :not(pre) { overflow: visible; }

.callout[data-callout="card"] .callout-content > h6:first-child {
    font-family: var(--at-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72em;
    color: var(--at-accent);
    font-weight: 500;
    margin: 0 0 10px;
    border: none;
    padding: 0;
}
.callout[data-callout="card"] .callout-content > h6:first-child::before {
    content: "● ";
    font-size: 0.8em;
    vertical-align: 0.1em;
}


.callout[data-callout="card"][data-callout-metadata*="dark"] {
    background: var(--at-dark-surface) !important;
    border-color: var(--at-on-dark-border);
    color: var(--at-on-dark);
}
.callout[data-callout="card"][data-callout-metadata*="dark"] > .callout-title .callout-title-inner { color: var(--at-on-dark); }
.callout[data-callout="card"][data-callout-metadata*="dark"] > .callout-content { color: var(--at-on-dark-muted); }
.callout[data-callout="card"][data-callout-metadata*="dark"] > .callout-content > :is(h1, h2, h3, h4) { color: var(--at-on-dark); }
.callout[data-callout="card"][data-callout-metadata*="dark"] > .callout-content > hr { border-top-color: var(--at-on-dark-border); }

.callout[data-callout="card"][data-callout-metadata*="dark"] .callout[data-callout="card"]:not([data-callout-metadata*="dark"]):not([data-callout-metadata*="accent"]) {
    color: var(--at-on-dark-muted);
}
.callout[data-callout="card"][data-callout-metadata*="dark"] .callout[data-callout="card"]:not([data-callout-metadata*="dark"]):not([data-callout-metadata*="accent"]) :is(h1, h2, h3, h4, p, li) {
    color: var(--at-on-dark);
}
.callout[data-callout="card"][data-callout-metadata*="dark"] .callout[data-callout="card"]:not([data-callout-metadata*="dark"]):not([data-callout-metadata*="accent"]) p {
    color: var(--at-on-dark-muted);
}


.callout[data-callout="card"][data-callout-metadata*="accent"] {
    background: var(--at-accent-surface);
    border-color: transparent;
    color: var(--at-on-accent);
}
.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-title .callout-title-inner,
.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-content > :is(h1, h2, h3, h4) { color: var(--at-on-accent); }
.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-title .callout-title-inner em,
.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-content > :is(h1, h2, h3) em { color: var(--at-on-accent-em); }
.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-content { color: color-mix(in srgb, var(--at-on-accent) 84%, var(--at-accent)); }
.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-content > h6:first-child,
.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-content > h6:first-child::before { color: var(--at-on-accent-kick); }


.callout[data-callout="card"][data-callout-metadata*="accent"] .callout.callout.callout.callout.callout.callout[data-callout="card"],
.callout[data-callout="card"][data-callout-metadata*="accent"] .callout.callout.callout.callout.callout.callout[data-callout="card"] > .callout-content {
    background: var(--at-accent-nested) !important;
    background-color: var(--at-accent-nested) !important;
    background-image: none !important;
}
.callout[data-callout="card"][data-callout-metadata*="accent"] .callout.callout.callout.callout.callout.callout[data-callout="card"] {
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: var(--radius-l) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30) !important;
}
.callout[data-callout="card"][data-callout-metadata*="accent"] .callout.callout.callout.callout.callout.callout[data-callout="card"] :is(h1, h2, h3, h4) { color: var(--at-accent-nested-h) !important; }
.callout[data-callout="card"][data-callout-metadata*="accent"] .callout.callout.callout.callout.callout.callout[data-callout="card"] :is(p, li, td) { color: var(--at-accent-nested-p) !important; }
.callout[data-callout="card"][data-callout-metadata*="accent"] .callout.callout.callout.callout.callout.callout[data-callout="card"] :is(h6, em) { color: var(--at-accent) !important; }
.callout[data-callout="card"][data-callout-metadata*="accent"] .callout.callout.callout.callout.callout.callout[data-callout-metadata*="channels"] tr > :first-child { color: var(--at-accent) !important; }
.callout[data-callout="card"][data-callout-metadata*="accent"] .callout.callout.callout.callout.callout.callout[data-callout="card"] img { border-color: var(--at-accent) !important; }


.callout[data-callout="card"][data-callout-metadata*="split"] > .callout-content { display: block; }
.callout[data-callout="card"][data-callout-metadata*="split"] > .callout-content::after { content: ""; display: block; clear: both; }
.callout[data-callout="card"][data-callout-metadata*="split"] > .callout-content > p:empty,
.callout[data-callout="card"][data-callout-metadata*="split"] > .callout-content > br { display: none; }
.callout[data-callout="card"][data-callout-metadata*="split"] > .callout-content > .callout[data-callout="grid"] {
    float: right;
    width: 50%;
    margin: 0 0 1rem 2.4rem;
}
@media (max-width: 820px) {
    .callout[data-callout="card"][data-callout-metadata*="split"] > .callout-content > .callout[data-callout="grid"] {
        float: none;
        width: 100%;
        margin: 1.4rem 0 0;
    }
}


:is(.callout[data-callout="card"][data-callout-metadata*="skill"],
    body.at-card-skill .callout[data-callout="card"]:not([data-callout-metadata])) pre {
    position: relative;
    background: var(--at-dark-surface) !important;
    border: 1px solid var(--at-on-dark-border);
    border-radius: var(--radius-m);
    padding: 15px 104px 15px 18px;
    margin: 6px 0 18px;
}
:is(.callout[data-callout="card"][data-callout-metadata*="skill"],
    body.at-card-skill .callout[data-callout="card"]:not([data-callout-metadata])) pre code {
    color: var(--at-on-dark) !important;
    background: none;
}
:is(.callout[data-callout="card"][data-callout-metadata*="skill"],
    body.at-card-skill .callout[data-callout="card"]:not([data-callout-metadata])) pre .copy-code-button {
    opacity: 1;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.08);
    color: var(--at-on-dark);
    border-radius: 8px;
    padding: 8px 14px;
    font-family: var(--at-font-mono);
    font-size: 0.66em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
:is(.callout[data-callout="card"][data-callout-metadata*="skill"],
    body.at-card-skill .callout[data-callout="card"]:not([data-callout-metadata])) ol {
    list-style: none;
    counter-reset: step;
    padding-left: 0;
}
:is(.callout[data-callout="card"][data-callout-metadata*="skill"],
    body.at-card-skill .callout[data-callout="card"]:not([data-callout-metadata])) ol > li {
    counter-increment: step;
    position: relative;
    padding-left: 3.2em;
    margin: 1em 0;
}
:is(.callout[data-callout="card"][data-callout-metadata*="skill"],
    body.at-card-skill .callout[data-callout="card"]:not([data-callout-metadata])) ol > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.05em;
    font-family: var(--at-font-mono);
    font-size: 0.95em;
    color: var(--at-accent);
    opacity: 0.55;
}
:is(.callout[data-callout="card"][data-callout-metadata*="skill"],
    body.at-card-skill .callout[data-callout="card"]:not([data-callout-metadata])) ol > li strong {
    display: block;
    font-family: var(--at-font-heading);
    font-weight: 600;
    font-size: 1.12em;
    color: var(--at-text-strong);
    margin-bottom: 2px;
}


:is(.callout[data-callout="card"][data-callout-metadata*="section"],
    body.at-card-section .callout[data-callout="card"]:not([data-callout-metadata])) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
:is(.callout[data-callout="card"][data-callout-metadata*="section"],
    body.at-card-section .callout[data-callout="card"]:not([data-callout-metadata])):hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}
:is(.callout[data-callout="card"][data-callout-metadata*="section"],
    body.at-card-section .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-title { display: none; }
:is(.callout[data-callout="card"][data-callout-metadata*="section"],
    body.at-card-section .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content { padding: 4px 0; }
:is(.callout[data-callout="card"][data-callout-metadata*="section"],
    body.at-card-section .callout[data-callout="card"]:not([data-callout-metadata])) h3 { margin: 4px 0 8px; font-size: 1.4em; }
:is(.callout[data-callout="card"][data-callout-metadata*="section"],
    body.at-card-section .callout[data-callout="card"]:not([data-callout-metadata])) ul { padding-left: 1.1em; }
:is(.callout[data-callout="card"][data-callout-metadata*="section"],
    body.at-card-section .callout[data-callout="card"]:not([data-callout-metadata])) ul > li::marker { color: var(--at-accent); }

.callout[data-callout="grid"] > .callout-content > .callout[data-callout="card"][data-callout-metadata*="section"] {
    border-left: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    padding-left: 1.8rem;
}
.callout[data-callout="grid"] > .callout-content > .callout[data-callout="card"][data-callout-metadata*="section"]:first-child {
    border-left: none;
    padding-left: 0;
}


:is(.callout[data-callout="card"][data-callout-metadata~="step"],
    body.at-card-step .callout[data-callout="card"]:not([data-callout-metadata])) {
    background: var(--at-dark-surface) !important;
    border: none;
    border-radius: var(--radius-l);
    box-shadow: none;
    color: var(--at-on-dark-muted);
}
:is(.callout[data-callout="card"][data-callout-metadata~="step"],
    body.at-card-step .callout[data-callout="card"]:not([data-callout-metadata])):hover {
    transform: none; box-shadow: none; border-color: transparent;
}
:is(.callout[data-callout="card"][data-callout-metadata~="step"],
    body.at-card-step .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-title { display: none; }
:is(.callout[data-callout="card"][data-callout-metadata~="step"],
    body.at-card-step .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content { padding: 30px 26px 40px; }

:is(.callout[data-callout="card"][data-callout-metadata~="step"],
    body.at-card-step .callout[data-callout="card"]:not([data-callout-metadata])) .callout-content > h6:first-child { text-transform: none; letter-spacing: 0.12em; }
:is(.callout[data-callout="card"][data-callout-metadata~="step"],
    body.at-card-step .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--at-accent) 60%, transparent);
    margin-bottom: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8552f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}

.callout[data-callout="grid"] > .callout-content > .callout[data-callout="card"][data-callout-metadata~="step"]:nth-of-type(3) > .callout-content::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8552f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 4v5h5'/%3E%3C/svg%3E");
}
.callout[data-callout="grid"] > .callout-content > .callout[data-callout="card"][data-callout-metadata~="step"]:nth-of-type(4) > .callout-content::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8552f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.callout[data-callout="grid"] > .callout-content > .callout[data-callout="card"][data-callout-metadata~="step"]:nth-of-type(5) > .callout-content::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8552f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12l2 2 4-4M3 6l2 2 4-4M3 18l2 2 4-4M13 6h8M13 12h8M13 18h8'/%3E%3C/svg%3E");
}
:is(.callout[data-callout="card"][data-callout-metadata~="step"],
    body.at-card-step .callout[data-callout="card"]:not([data-callout-metadata])) h3 {
    margin: 0 0 10px;
    font-family: var(--at-font-heading);
    font-weight: 500;
    font-size: 1.55em;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--at-on-dark);
}
:is(.callout[data-callout="card"][data-callout-metadata~="step"],
    body.at-card-step .callout[data-callout="card"]:not([data-callout-metadata])) h3 em { color: var(--at-accent); font-style: italic; }
:is(.callout[data-callout="card"][data-callout-metadata~="step"],
    body.at-card-step .callout[data-callout="card"]:not([data-callout-metadata])) p { color: var(--at-on-dark-muted); }


.callout[data-callout="grid"],
.callout[data-callout="grid"] > .callout-content { overflow: visible; }


.callout[data-callout="grid"]:has(> .callout-content > .callout[data-callout-metadata~="step"]) > .callout-content {
    gap: 0 !important;
}

.callout[data-callout="grid"]:has(> .callout-content > .callout[data-callout-metadata~="step"]) > .callout-content > .callout[data-callout="card"] {
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.callout[data-callout="grid"]:has(> .callout-content > .callout[data-callout-metadata~="step"]) > .callout-content > .callout[data-callout-metadata~="step"] {
    border-top: 1px solid color-mix(in srgb, var(--at-on-dark) 16%, transparent) !important;
}
.callout[data-callout="grid"]:has(> .callout-content > .callout[data-callout-metadata~="step"]) > .callout-content > .callout[data-callout-metadata~="step"] + .callout[data-callout-metadata~="step"] {
    border-left: 1px solid color-mix(in srgb, var(--at-on-dark) 16%, transparent) !important;
}

.callout[data-callout="grid"]:has(> .callout-content > .callout[data-callout-metadata~="step"]) > .callout-content > .callout[data-callout-metadata*="hero"] {
    border-radius: var(--radius-l) var(--radius-l) 0 0 !important;
}
.callout[data-callout="grid"]:has(> .callout-content > .callout[data-callout-metadata~="step"]) > .callout-content > .callout[data-callout-metadata*="hero"] + .callout[data-callout-metadata~="step"] {
    border-bottom-left-radius: var(--radius-l) !important;
}
.callout[data-callout="grid"]:has(> .callout-content > .callout[data-callout-metadata~="step"]) > .callout-content > .callout[data-callout-metadata~="step"]:last-of-type {
    border-bottom-right-radius: var(--radius-l) !important;
}

.callout[data-callout="grid"]:has(> .callout-content > .callout[data-callout-metadata~="step"]) :is(h1, h2, h3) { color: var(--at-on-dark) !important; }
.callout[data-callout="grid"]:has(> .callout-content > .callout[data-callout-metadata~="step"]) :is(h6, em) { color: var(--at-accent) !important; }
.callout[data-callout="grid"]:has(> .callout-content > .callout[data-callout-metadata~="step"]) p:not(:has(strong)) { color: var(--at-on-dark-muted) !important; }


.callout[data-callout="grid"] > .callout-content > .callout[data-callout="card"][data-callout-metadata*="hero"] > .callout-content {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    column-gap: 48px;
    align-items: start;
}
.callout[data-callout="grid"] > .callout-content > .callout[data-callout-metadata*="hero"] > .callout-content > h6:first-child { grid-column: 1 / -1; }
.callout[data-callout="grid"] > .callout-content > .callout[data-callout-metadata*="hero"] > .callout-content > h1 { grid-column: 1; margin-bottom: 0; }

.callout[data-callout="grid"] > .callout-content > .callout[data-callout-metadata*="hero"] > .callout-content > p:not(:has(strong)) {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    align-self: start;
    margin-top: 8px;
}

.callout[data-callout="grid"] > .callout-content > .callout[data-callout-metadata*="hero"] > .callout-content > p:has(strong) { grid-column: 1; }
@media (max-width: 820px) {
    .callout[data-callout="grid"] > .callout-content > .callout[data-callout-metadata*="hero"] > .callout-content { grid-template-columns: 1fr; }
    .callout[data-callout="grid"] > .callout-content > .callout[data-callout-metadata*="hero"] > .callout-content > p:not(:has(strong)) { grid-column: 1; grid-row: auto; text-align: left; }
}


:is(.callout[data-callout="card"][data-callout-metadata*="profile"],
    body.at-card-profile .callout[data-callout="card"]:not([data-callout-metadata])) {
    text-align: center;
}
:is(.callout[data-callout="card"][data-callout-metadata*="profile"],
    body.at-card-profile .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-title { display: none; }
:is(.callout[data-callout="card"][data-callout-metadata*="profile"],
    body.at-card-profile .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content { padding: 18px 16px; }
:is(.callout[data-callout="card"][data-callout-metadata*="profile"],
    body.at-card-profile .callout[data-callout="card"]:not([data-callout-metadata])) img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 8px;
}
:is(.callout[data-callout="card"][data-callout-metadata*="profile"],
    body.at-card-profile .callout[data-callout="card"]:not([data-callout-metadata])) h6 {
    font-family: var(--at-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7em;
    color: var(--at-accent);
    border: none;
    margin: 0 0 6px;
    padding: 0;
}
:is(.callout[data-callout="card"][data-callout-metadata*="profile"],
    body.at-card-profile .callout[data-callout="card"]:not([data-callout-metadata])) :is(h2, h3) {
    font-family: var(--at-font-heading);
    font-weight: 500;
    font-size: 1.5em;
    margin: 0 0 10px;
}
:is(.callout[data-callout="card"][data-callout-metadata*="profile"],
    body.at-card-profile .callout[data-callout="card"]:not([data-callout-metadata])) a {
    font-family: var(--at-font-mono);
    font-size: 0.8em;
    border-bottom: none;
}


:is(.callout[data-callout="card"][data-callout-metadata*="honor"],
    body.at-card-honor .callout[data-callout="card"]:not([data-callout-metadata])) {
    background: var(--at-dark-surface);
    border-color: var(--at-on-dark-border);
    color: var(--at-on-dark);
}
:is(.callout[data-callout="card"][data-callout-metadata*="honor"],
    body.at-card-honor .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-title { display: none; }
:is(.callout[data-callout="card"][data-callout-metadata*="honor"],
    body.at-card-honor .callout[data-callout="card"]:not([data-callout-metadata])) .callout-content > h6:first-child {
    display: inline-block;
    background: var(--at-accent);
    color: #fff;
    padding: 3px 10px;
    border-radius: 5px;
}
:is(.callout[data-callout="card"][data-callout-metadata*="honor"],
    body.at-card-honor .callout[data-callout="card"]:not([data-callout-metadata])) .callout-content > h6:first-child::before { content: none; }
:is(.callout[data-callout="card"][data-callout-metadata*="honor"],
    body.at-card-honor .callout[data-callout="card"]:not([data-callout-metadata])) img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--at-accent);
    padding: 3px;
}
:is(.callout[data-callout="card"][data-callout-metadata*="honor"],
    body.at-card-honor .callout[data-callout="card"]:not([data-callout-metadata])) :is(h2, h3) {
    font-family: var(--at-font-heading);
    font-weight: 500;
    font-size: 2em;
    color: var(--at-on-dark);
    margin: 8px 0 6px;
}
:is(.callout[data-callout="card"][data-callout-metadata*="honor"],
    body.at-card-honor .callout[data-callout="card"]:not([data-callout-metadata])) blockquote {
    background: none;
    border-left: 2px solid var(--at-accent);
    border-radius: 0;
    font-family: var(--at-font-heading);
    font-style: italic;
    font-size: 1.3em;
    color: var(--at-on-dark);
    padding: 4px 0 4px 18px;
}
:is(.callout[data-callout="card"][data-callout-metadata*="honor"],
    body.at-card-honor .callout[data-callout="card"]:not([data-callout-metadata])) strong { color: var(--at-accent); font-size: 1.4em; }
:is(.callout[data-callout="card"][data-callout-metadata*="honor"],
    body.at-card-honor .callout[data-callout="card"]:not([data-callout-metadata])) hr {
    border: none;
    border-top: 1px solid var(--at-on-dark-border);
    margin: 14px 0;
}


:is(.callout[data-callout="card"][data-callout-metadata*="channels"],
    body.at-card-channels .callout[data-callout="card"]:not([data-callout-metadata])) {
    background: var(--at-dark-surface);
    border-color: var(--at-on-dark-border);
    color: var(--at-on-dark);
}
:is(.callout[data-callout="card"][data-callout-metadata*="channels"],
    body.at-card-channels .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-title { display: none; }
:is(.callout[data-callout="card"][data-callout-metadata*="channels"],
    body.at-card-channels .callout[data-callout="card"]:not([data-callout-metadata])) table {
    width: 100%;
    border: none;
    background: none;
    border-radius: 0;
}
:is(.callout[data-callout="card"][data-callout-metadata*="channels"],
    body.at-card-channels .callout[data-callout="card"]:not([data-callout-metadata])) thead { display: none; }
:is(.callout[data-callout="card"][data-callout-metadata*="channels"],
    body.at-card-channels .callout[data-callout="card"]:not([data-callout-metadata])) :is(th, td) {
    border: none;
    border-bottom: 1px solid var(--at-on-dark-border);
    padding: 9px 4px;
    background: none;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--at-font-body);
}
:is(.callout[data-callout="card"][data-callout-metadata*="channels"],
    body.at-card-channels .callout[data-callout="card"]:not([data-callout-metadata])) tr > :first-child {
    color: var(--at-accent);
    font-weight: 600;
}
:is(.callout[data-callout="card"][data-callout-metadata*="channels"],
    body.at-card-channels .callout[data-callout="card"]:not([data-callout-metadata])) tr > :first-child::before { content: "# "; opacity: 0.7; }
:is(.callout[data-callout="card"][data-callout-metadata*="channels"],
    body.at-card-channels .callout[data-callout="card"]:not([data-callout-metadata])) tr > :last-child {
    text-align: right;
    color: var(--at-on-dark-muted);
    font-family: var(--at-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.76em;
}
:is(.callout[data-callout="card"][data-callout-metadata*="channels"],
    body.at-card-channels .callout[data-callout="card"]:not([data-callout-metadata])) tr:last-child :is(th, td) { border-bottom: none; }



:is(.callout[data-callout="card"][data-callout-metadata*="hero"],
    body.at-card-hero .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-title { display: none; }
:is(.callout[data-callout="card"][data-callout-metadata*="hero"],
    body.at-card-hero .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content { padding: 20px 28px 26px; }
:is(.callout[data-callout="card"][data-callout-metadata*="hero"],
    body.at-card-hero .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content > :is(h1, h2) {
    font-size: 3.2em;
    line-height: 1.02;
    margin: 0 0 16px;
    border: none;
}


:is(.callout[data-callout="card"][data-callout-metadata*="hero"],
    body.at-card-hero .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content a {
    display: inline-block;
    border: 1.5px solid var(--at-accent);
    border-radius: 99px;
    padding: 11px 24px;
    margin: 16px 12px 0 0;
    font-family: var(--at-font-body);
    font-weight: 600;
    color: var(--at-accent);
    cursor: pointer;
    transition: opacity var(--at-dur-fast) var(--at-ease);
}
:is(.callout[data-callout="card"][data-callout-metadata*="hero"],
    body.at-card-hero .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content strong a {
    background: var(--at-accent);
    color: #fff;
    border-color: var(--at-accent);
}
:is(.callout[data-callout="card"][data-callout-metadata*="hero"],
    body.at-card-hero .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content a:hover { opacity: 0.85; }

:is(.callout[data-callout="card"][data-callout-metadata*="hero"],
    body.at-card-hero .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content .callout a {
    display: inline;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    font-weight: inherit;
    color: var(--at-accent);
}


.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-content a {
    border-color: color-mix(in srgb, var(--at-on-accent) 55%, transparent) !important;
    color: var(--at-on-accent) !important;
}
.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-content a:hover {
    border-color: var(--at-on-accent) !important;
    background: color-mix(in srgb, var(--at-on-accent) 8%, transparent) !important;
}

.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-content strong a {
    background: var(--at-accent-btn-bg) !important;
    color: var(--at-accent-btn-fg) !important;
    border-color: var(--at-accent-btn-bg) !important;
}
.callout[data-callout="card"][data-callout-metadata*="accent"] > .callout-content .callout a { color: inherit !important; border: none !important; background: none !important; }

:is(.callout[data-callout="card"][data-callout-metadata*="hero"],
    body.at-card-hero .callout[data-callout="card"]:not([data-callout-metadata])) > .callout-content a[href*="discord"]::before {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-right: 0.5em;
    vertical-align: -0.16em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.27 5.33A18 18 0 0 0 14.72 4l-.2.4a13.7 13.7 0 0 0-5.04 0L9.27 4a18 18 0 0 0-4.54 1.33C2.4 8.94 1.78 12.45 2.09 15.9a18.4 18.4 0 0 0 5.6 2.83l1.13-1.55a11.6 11.6 0 0 1-1.78-.86l.44-.34a13 13 0 0 0 11.04 0l.44.34c-.55.33-1.16.61-1.78.86l1.13 1.55a18.3 18.3 0 0 0 5.6-2.83c.45-4.05-.5-7.53-2.64-10.57Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.27 5.33A18 18 0 0 0 14.72 4l-.2.4a13.7 13.7 0 0 0-5.04 0L9.27 4a18 18 0 0 0-4.54 1.33C2.4 8.94 1.78 12.45 2.09 15.9a18.4 18.4 0 0 0 5.6 2.83l1.13-1.55a11.6 11.6 0 0 1-1.78-.86l.44-.34a13 13 0 0 0 11.04 0l.44.34c-.55.33-1.16.61-1.78.86l1.13 1.55a18.3 18.3 0 0 0 5.6-2.83c.45-4.05-.5-7.53-2.64-10.57Z'/%3E%3C/svg%3E") center / contain no-repeat;
}



body { --at-infobox-width: 300px; }

.markdown-preview-view .markdown-preview-sizer > div:has(> .callout[data-callout="infobox"]),
.markdown-source-view .cm-embed-block.cm-callout:has(.callout[data-callout="infobox"]) {
    float: right;
    width: var(--at-infobox-width);
    max-width: 42%;
    margin: 4px 0 16px 24px;
    
    pointer-events: none;
}
.callout[data-callout="infobox"] { pointer-events: auto; }

@media (max-width: 700px) {
    .markdown-preview-view .markdown-preview-sizer > div:has(> .callout[data-callout="infobox"]),
    .markdown-source-view .cm-embed-block.cm-callout:has(.callout[data-callout="infobox"]) {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 !important;
    }
}
.markdown-preview-view .markdown-preview-sizer > div:has(> .callout[data-callout="infobox"][data-callout-metadata*="left"]),
.markdown-source-view .cm-embed-block.cm-callout:has(.callout[data-callout="infobox"][data-callout-metadata*="left"]) {
    float: left;
    margin: 4px 24px 18px 0;
}

.markdown-preview-view .markdown-preview-sizer > div:has(> .callout[data-callout="infobox"][data-callout-metadata*="center"]),
.markdown-source-view .cm-embed-block.cm-callout:has(.callout[data-callout="infobox"][data-callout-metadata*="center"]) {
    float: none;
    margin: 22px auto;
    max-width: var(--at-infobox-width);
}

.markdown-preview-view .markdown-preview-sizer > :is(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6, .el-hr, .el-blockquote, .el-pre, .el-table, .el-callout),
.markdown-reading-view .markdown-preview-sizer > :is(.el-h1, .el-h2, .el-h3, .el-h4, .el-h5, .el-h6, .el-hr, .el-blockquote, .el-pre, .el-table, .el-callout) { display: flow-root; }

.callout[data-callout="infobox"] {
    position: relative;
    float: none;
    width: 100%;
    margin: 0;
    border: 1px solid var(--at-border-2);
    border-radius: var(--radius-l);
    background: var(--at-pane-2);
    overflow: hidden;                
    box-shadow: var(--at-shadow-pop);
    transition: transform var(--at-dur) var(--at-ease), box-shadow var(--at-dur) var(--at-ease);
}

.callout[data-callout="infobox"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 2px 6px rgba(60, 45, 25, 0.12), 0 24px 56px rgba(60, 45, 25, 0.22);
}

.callout[data-callout="infobox"] > .callout-title {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    margin: 0;
    padding: 6px 16px;
    background: var(--at-accent);
    border: none;
    border-radius: 0 0 var(--radius-m) 0;   
    box-shadow: 0 4px 12px color-mix(in srgb, var(--at-accent) 30%, transparent);
}
.callout[data-callout="infobox"] > .callout-title .callout-icon { display: none; }
.callout[data-callout="infobox"] > .callout-title .callout-title-inner {
    font-family: var(--at-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72em;
    font-weight: 600;
    color: #fff;
}
.callout[data-callout="infobox"] > .callout-content { padding: 14px 16px 16px; }

.callout[data-callout="infobox"] .callout-content > :is(h1, h2, h3):first-child {
    font-family: var(--at-font-heading);
    font-weight: 500;
    font-size: 1.5em;
    line-height: 1.1;
    margin: 0 0 2px;
    padding: 0;
    border-bottom: none;
    color: var(--at-text-strong);
}
.callout[data-callout="infobox"] .callout-content > :is(h1, h2, h3) em { color: var(--at-accent); font-style: italic; }

.callout[data-callout="infobox"] .callout-content > p:first-child,
.callout[data-callout="infobox"] .callout-content > :is(h1, h2, h3):first-child + p {
    font-style: italic;
    color: var(--at-muted);
    margin: 4px 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--at-border);
}
.callout[data-callout="infobox"] .table-wrapper { overflow: visible; max-width: 100%; }
.callout[data-callout="infobox"] table {
    border: none; border-radius: 0; width: 100%; margin: 0;
    font-size: 0.88em; background: transparent; table-layout: fixed;
}
.callout[data-callout="infobox"] td,
.callout[data-callout="infobox"] th { overflow-wrap: anywhere; }
.callout[data-callout="infobox"] thead { display: none; }
.callout[data-callout="infobox"] th,
.callout[data-callout="infobox"] td {
    border: none;
    border-top: 1px solid var(--at-border);
    background: none;
    padding: 8px 14px;
    color: var(--at-text);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--at-font-body);
}
.callout[data-callout="infobox"] tr > :first-child { color: var(--at-muted); font-weight: 500; width: 40%; }
.callout[data-callout="infobox"] tr > :first-child strong { color: inherit; font-weight: 600; }
.callout[data-callout="infobox"] a { color: var(--at-accent); border-bottom: none; }


.callout[data-callout="infobox"][data-callout-metadata*="v2"],
body.at-ib-v2 .callout[data-callout="infobox"]:not([data-callout-metadata*="v"]) {
    background: var(--at-dark-surface);
    border-color: var(--at-on-dark-border);
    color: var(--at-on-dark);
}
:is(.callout[data-callout="infobox"][data-callout-metadata*="v2"],
    body.at-ib-v2 .callout[data-callout="infobox"]:not([data-callout-metadata*="v"])) :is(h1, h2):first-child { color: var(--at-on-dark); }
:is(.callout[data-callout="infobox"][data-callout-metadata*="v2"],
    body.at-ib-v2 .callout[data-callout="infobox"]:not([data-callout-metadata*="v"])) :is(th, td) { color: var(--at-on-dark-muted); border-top-color: var(--at-on-dark-border); }
:is(.callout[data-callout="infobox"][data-callout-metadata*="v2"],
    body.at-ib-v2 .callout[data-callout="infobox"]:not([data-callout-metadata*="v"])) img { border-radius: 50%; }


.callout[data-callout="infobox"][data-callout-metadata*="v3"],
body.at-ib-v3 .callout[data-callout="infobox"]:not([data-callout-metadata*="v"]) {
    background: transparent;
    border: 1px solid var(--at-border-strong);
    border-radius: var(--radius-s);
    box-shadow: none;
}


.callout[data-callout="infobox"] .callout-content img {
    display: block;
    width: 100%;
    border-radius: var(--radius-m);
    border: 1px solid var(--at-border-2);
    margin: 4px 0 10px;
}
.callout[data-callout="infobox"] .callout-content > p:has(strong) + p:last-child {
    background: var(--at-dark-surface);
    color: var(--at-on-dark-muted);
    margin: 12px -16px -16px;
    padding: 4px 16px 12px;
    border-radius: 0 0 var(--radius-l) var(--radius-l);
    font-family: var(--at-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7em;
}
.callout[data-callout="infobox"] .callout-content > p:has(strong):has(+ p:last-child) {
    background: var(--at-dark-surface);
    color: var(--at-on-dark);
    margin: 12px -16px 0;
    padding: 12px 16px 3px;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    font-weight: 600;
    font-size: 0.92em;
    line-height: 1.3;
}
.callout[data-callout="infobox"] .callout-content > p:has(strong):has(+ p:last-child) strong { color: var(--at-on-dark); }



body { --list-min-width: var(--callout-min-width, 200px); }

.callout[data-callout="multi-column"] {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}
.callout[data-callout="multi-column"] > .callout-title { display: none; }
.callout[data-callout="multi-column"] > .callout-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: stretch;
}
.callout[data-callout="multi-column"] > .callout-content > .callout {
    flex: 1 1 var(--list-min-width);
    min-width: var(--list-min-width);
}
.callout[data-callout="multi-column"][data-callout-metadata*="col3"] > .callout-content > .callout { flex-basis: calc(33% - 1em); }


body { --at-col-gap: 30px; --at-col-min: 200px; }

.callout[data-callout="columns"] {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 1.3em 0;
}
.callout[data-callout="columns"] > .callout-title { display: none; }
.callout[data-callout="columns"] > .callout-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--at-col-gap);
    align-items: stretch;
    padding: 0 !important;
}

.callout[data-callout="columns"] > .callout-content > p:empty,
.callout[data-callout="columns"] > .callout-content > br { display: none; }

.callout[data-callout="columns"] > .callout-content > .callout[data-callout="col"] {
    flex: 1 1 0;
    min-width: var(--at-col-min);
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    animation: none !important;
}
.callout[data-callout="columns"] > .callout-content > .callout[data-callout="col"]:hover { transform: none; box-shadow: none; }
.callout[data-callout="columns"] > .callout-content > .callout[data-callout="col"] > .callout-title { display: none; }
.callout[data-callout="columns"] > .callout-content > .callout[data-callout="col"] > .callout-content { padding: 0 !important; }
.callout[data-callout="columns"] > .callout-content > .callout[data-callout="col"] > .callout-content > :first-child { margin-top: 0; }

.callout[data-callout="col"][data-callout-metadata~="w1"]  { flex-grow: 1 !important; }
.callout[data-callout="col"][data-callout-metadata~="w2"]  { flex-grow: 2 !important; }
.callout[data-callout="col"][data-callout-metadata~="w3"]  { flex-grow: 3 !important; }
.callout[data-callout="col"][data-callout-metadata~="w4"]  { flex-grow: 4 !important; }
.callout[data-callout="col"][data-callout-metadata~="w5"]  { flex-grow: 5 !important; }
.callout[data-callout="col"][data-callout-metadata~="w6"]  { flex-grow: 6 !important; }
.callout[data-callout="col"][data-callout-metadata~="w7"]  { flex-grow: 7 !important; }
.callout[data-callout="col"][data-callout-metadata~="w8"]  { flex-grow: 8 !important; }
.callout[data-callout="col"][data-callout-metadata~="w9"]  { flex-grow: 9 !important; }
.callout[data-callout="col"][data-callout-metadata~="w10"] { flex-grow: 10 !important; }

.callout[data-callout="columns"][data-callout-metadata~="ruled"] > .callout-content > .callout[data-callout="col"] + .callout[data-callout="col"] {
    border-left: 1px solid var(--at-border) !important;
    padding-left: var(--at-col-gap) !important;
}


.markdown-rendered hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--at-border-strong), transparent);
}




@keyframes at-rise {
    from { transform: translateY(8px); }
    to   { transform: translateY(0); }
}

body.at-scroll-reveal .markdown-rendered :is(h1, h2, blockquote, table) {
    animation: at-rise var(--at-dur) var(--at-ease);
}


@keyframes at-load-bar {
    0%   { transform: scaleX(0);   opacity: 1; }
    72%  { transform: scaleX(1);   opacity: 1; }
    100% { transform: scaleX(1);   opacity: 0; }
}
body:not(.at-no-anim)::after {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    transform-origin: left center;
    background: linear-gradient(90deg,
        transparent,
        var(--at-accent) 36%,
        color-mix(in srgb, var(--at-accent) 45%, transparent));
    box-shadow: 0 0 10px color-mix(in srgb, var(--at-accent) 55%, transparent);
    z-index: 9999;
    pointer-events: none;
    animation: at-load-bar 1080ms var(--at-ease) both;
}
@keyframes at-open-rise {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}
body:not(.at-no-anim) .markdown-preview-view .markdown-preview-sizer,
body:not(.at-no-anim) .markdown-source-view .cm-sizer {
    animation: at-open-rise 460ms var(--at-ease);
}


body.at-active-line .markdown-source-view.mod-cm6 .cm-active.cm-line {
    background: var(--at-accent-soft);
    border-radius: var(--radius-s);
}

body.at-no-anim *,
body.at-no-anim *::before,
body.at-no-anim *::after {
    animation: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}


.markdown-rendered .at-gradient {
    color: var(--grad-color, var(--at-grad-color, var(--at-accent)));
    font-weight: 600;
}
.markdown-rendered .at-gradient em { color: var(--grad-color, var(--at-grad-color, var(--at-accent))); font-style: italic; }