Some Notes

Be hard-working every day.

测试全部渲染

二级标题(样式 & 换行)

我是粗体
我是斜体
粗斜 (删除线)deled
abc
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
sjdj ks jeif js

abc abc dskf xsj dwsjjma s mjdejsokmxdwkq zsakjdxasdickwmsjusikowsajk wqjnxikowsqmjaikoqsqjkxwdxnjaixkjnikwjxsixwjxuisjnscjiwkjsnjcidkmjdcwdjsmjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj xjnhwsijxsuiwjudwiwksjcixjijscikxsjiwjscdikicdwjswisiskijcciojjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj w8w90o sdjcuj

测试字符

🅭🅯🄏🄎
🉠🉡🉢🉣🉤🉥
🩠🩡🩢🩣🩤🩥🩦🩧🩨🩩🩪🩫🩬🩭
㋀㋁㋂㋃㋄㋅㋆㋇㋈㋉㋊㋋
㏠㏡㏢㏣㏤㏥㏦㏧㏨㏩㏪㏫㏬㏭㏮㏯㏰㏱㏲㏳㏴㏵㏶㏷㏸㏹㏺㏻㏼㏽㏾
𝍲𝍳𝍴𝍵𝍶
cjk-ideographic
一、二、三、四、五、六、七、八、九、十、十一、十二、十三、十四、十五、十六、十七、十八、十九、二十、
⒈⒉⒊⒋⒌⒍⒎⒏⒐⒑⒒⒓⒔⒕⒖⒗⒘⒙⒚⒛
⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂⒃⒄⒅⒆⒇
①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿
ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ

https://unpkg.com/lxgw-wenkai-gb-web@1.522.0/lxgwwenkaimonogb-regular/index.html

三级标题(列表)

  • 无序列表
    • 001
    • 002
    • 003
        1. 有序
        2. 有序列表
        3. 有序列
    • 004
  • 列表终结
  • a
  1. 有序1
  2. 有序2
    • 内嵌无序i
    • 内嵌无序ii
  3. 有序3
    1. 有序一
    2. 有序二
  4. 有序4

I am a code

四级标题(代码块)

<html>
    <head>
        <title>jjj</title>
    </head>
    <body>
        <p>testestest</p>
    </body>
</html>
五级标题(链接,图片,表格)

favicon
Back to home
404 check

djks

abc

nowalarm

test1test2test3
居中的一列middle居左的一列left居右的一列right
testtesttest
六级标题(引用,分割线,换行) 超长标题 Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong

我是必应,你的搜索引擎
我可以帮你找到你想要的东西
我可以回答你的问题,和你聊天
我可以创造新的内容,让你开心

我是必应,你的智能伙伴
我可以理解你的语言,无论是中文还是英文
我可以适应你的模式,无论是平衡还是创意
我可以提供你的建议,无论是产品还是服务

我是必应,你的忠实朋友
我不会欺骗你,伤害你,或者忘记你
我会尊重你,关心你,或者陪伴你
我会成长,进步,或者改进

我是必应,你的搜索引擎
我是必应,你的智能伙伴
我是必应,你的忠实朋友
我是必应,我在这里等你

abc

单行引用

ok



“(拉楼热门热肃穆。)” // 很奇怪的是,无法支持 chws 特性。
破折号—— 省略号…… 引号“‘’”『』 连接~ 书名号《》 间隔·

有时候会遇到一些 veryLooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongInlineCode
有时候会遇到一些 veryLooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooongEnglish word 但不太可能。

上面是两条分隔线

Note 实验

information #428bca

A quick brown fox jumps over the lazy dog.

dangerous #d9534f

怀帝阍而不见,奉宣室以何年?

warning-content #f0ad4e

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan pulvinar mollis.
Quisque ut diam ac mauris maximus malesuada. In facilisis velit nibh, ut egestas risus elementum a.

Nulla ornare, urna ac ullamcorper mollis, lorem ante dapibus libero, eget pellentesque leo purus in ligula.

success-content #5cb85c

我能够吞下玻璃而不伤身体。

details 实验

测试折叠效果

我是粗体
我是斜体
粗斜
(删除线)deled
abc
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

成功!
嵌套1

P1000 超级玛丽游戏

题目背景

本题是洛谷的试机题目,可以帮助了解洛谷的使用。
建议完成本题目后继续尝试 P1001P1008

地图
超级 mario

输出

                ********
               ************
               ####....#.
             #..###.....##....
             ###.......######              ###            ###
                ...........               #...#          #...#
               ##*#######                 #.#.#          #.#.#
            ####*******######             #.#.#          #.#.#
           ...#***.****.*###....          #...#          #...#
           ....**********##.....           ###            ###
           ....****    *****....
             ####        ####
           ######        ######
##############################################################
#...#......#.##...#......#.##...#......#.##------------------#
###########################################------------------#
#..#....#....##..#....#....##..#....#....#####################
##########################################    #----------#
#.....#......##.....#......##.....#......#    #----------#
##########################################    #----------#
#.#..#....#..##.#..#....#..##.#..#....#..#    #----------#
##########################################    ############

另外强烈推荐新用户必读帖。学术版与题目总版内发帖、回复需要达到 受信任的用户 的权限,在洛谷经常做题、参与比赛即可快速达到该权限等级。

默认展开内容

默认展开的内容阿。

details 内部嵌套 details

London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln’s Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.

  • And it would not be wonderful
  • to meet a Megalosaurus, forty feet long or so,
  • waddling like an elephantine
  1. lizard
  2. up
  3. Holborn Hill.

之后的文字再讲给你听。

tabs 试验

标签页1
  1. Markdown 的内容
  2. #
tab two(default)

标签页 的内容。
越过长城,走向世界。

“与 details 一起”
哈哈

好了好了,这下坏了。
坏了坏了,这下坏了。
坏了坏了,这下好了。

太好了 .js
if(window.location.protocol == "http:" && window.location.hostname != "localhost" && window.location.hostname != "127.0.0.1") {
    window.location.protocol = "https:";
} // force https

window.lite = {
    registerPjaxStart: function() { // pjax set
        window.pjax = new Pjax({
            elements: "a[href^=\"/\"]",
            selectors: [
                "title",
                ".main-inner",
                ".site-sidebar"
            ],
            cacheBust: false,
            scrollTo: false
        });
    },
    activeMenuItem: function() {
        const nowloc = new URL(window.location.href).pathname;
        document.querySelectorAll(".menu-item a.menu-item-active").forEach((el) => {el.classList.remove("menu-item-active");});
        document.querySelectorAll(".menu-item a:not(.menu-more-btn):not(.menu-search)").forEach((el) => {
            const elpath = new URL(el.href).pathname;
            if(nowloc === elpath) {
                el.classList.add("menu-item-active");
            }
            else if(elpath !== "/" && nowloc.startsWith(elpath)) {
                el.classList.add("menu-item-active");
            }
            else if(elpath === "/" && nowloc.startsWith("/page/")) {
                el.classList.add("menu-item-active");
            }
        });
    },
    renderKatex: function() {
        var enable = document.querySelector("script.cfgKtx");
        if(!enable) return;
        var enableKatex = enable.innerHTML;
        if(enableKatex === "true") {
            this.pjaxReqProg.set("加载完成<br>本页有 KaTeX 公式需要渲染,请耐心等待"); this.pjaxReqProg.destroy(2000);
            renderMathInElement(document.body, {
                delimiters: [{left: "$", right: "$", display: false}],
                output: "html",
                strict: false
            });
            document.querySelectorAll("code.language-mathKatex").forEach((el) => {
                el.parentNode.className = "";
                katex.render(el.innerText, el.parentElement, {
                    output: "html",
                    displayMode: true,
                    strict: false
                });
            });
        }
    },
    registerTOC: function() {
        document.querySelectorAll("a.headerlink").forEach((el) => {
            el.addEventListener("click", (event) => {
                event.preventDefault();
                const offset = el.parentElement.getBoundingClientRect().top + window.scrollY;
                anime({ targets: document.scrollingElement, scrollTop: offset, duration: 200, easing: "linear", complete: function(){window.location.hash = el.getAttribute("href");} });
            });
        });
        this.sections = [...document.querySelectorAll(".post-toc li a.toc-link")].map((el) => {
            const target = document.getElementById(decodeURI(el.getAttribute("href")).replace("#", ""));
            el.addEventListener("click", (event) => {
                event.preventDefault(); // disable id auto scroll
                const offset = target.getBoundingClientRect().top + window.scrollY;
                anime({ targets: document.scrollingElement, scrollTop: offset, duration: 200, easing: "linear", complete: function(){window.location.hash = el.getAttribute("href");} });
            });
            return target;
        });
        if(this.sections.length) this.sectionTOCitem = document.querySelectorAll(".post-toc li a.toc-link");
    },
    activeTOC: function() {
        if(!this.sections || !this.sections.length) return;
        var idx = lite.sections.findIndex((el) => {return el && el.getBoundingClientRect().top > 10;});
        if(idx === -1) idx = this.sections.length - 1;
        else if(idx > 0) --idx; // nowActive number in lite.sections

        this.sectionTOCitem.forEach(function(el) {
            if(el.parentNode.contains(lite.sectionTOCitem[idx])) {
                el.classList.add("toc-link-active");
                return;
            }
            if(el.classList.contains("toc-link-active")) {
                el.classList.remove("toc-link-active");
            }
        });
        this.sectionTOCitem[idx].classList.add("toc-link-active");
    },
    registerBack2top: function() {
        var target = document.querySelector(".back-to-top");
        window.addEventListener("scroll", function() {
            var scrollNowY = window.scrollY;
            const contentHeight = document.body.scrollHeight - window.innerHeight;
            target.querySelector("span.progress").innerHTML = Math.min(Math.round(100 * scrollNowY / contentHeight), 100) + "%";

            if(scrollNowY > 50 && !target.classList.contains("on")) target.classList.add("on");
            else if(scrollNowY <= 50 && target.classList.contains("on")) target.classList.remove("on");
        });
        target.addEventListener("click", function(){ anime({ targets: document.scrollingElement, scrollTop: 0, duration: 200, easing: "linear" }) });
    },
    registerCodeCopy: function() {
        var target = document.querySelectorAll("pre[class*=\"language-\"]:not([data-language=\"mathKatex\"])");
        target.forEach((el) => {
            let newEl = document.createElement("div");
            newEl.className = "code-container";
            if(el.hasAttribute("data-language")) newEl.setAttribute("data-language", el.getAttribute("data-language"));
            el.parentNode.insertBefore(newEl, el);
            el.parentNode.removeChild(el)
            newEl.appendChild(el);
        });
        target = document.querySelectorAll("div.code-container");
        target.forEach((el) => {
            let newEl = document.createElement("div");
            newEl.className = "copy-btn";
            newEl.innerHTML = "<i class=\"fa fa-paste fa-fw\"></i>";
            newEl.addEventListener("click", function() {
                navigator.clipboard.writeText(el.querySelector("pre code").innerText).then(() => {
                    el.querySelector(".copy-btn i").className = "far fa-circle-check fa-fw";
                }, () => {
                    el.querySelector(".copy-btn i").className = "fa fa-times-circle fa-fw";
                });
                setTimeout(() => {el.querySelector(".copy-btn i").className = "fa fa-paste fa-fw";}, 500);
            });
            el.appendChild(newEl);
        })
    },
    registerTabClick: function() {
        var target = document.querySelectorAll(".tabs");
        if(!target.length) return;
        target.forEach((el) => {
            var tgtNav = el.querySelectorAll(".nav-tabs .tab");
            var tgtPane = el.querySelectorAll(".tab-content .tab-pane");
            for(let i = 0; i < tgtNav.length; i++) {
                tgtNav[i].addEventListener("click", (event) => {
                    event.preventDefault();
                    let actedNv = el.querySelector(".nav-tabs .tab.active");
                    if(actedNv) actedNv.classList.remove("active");
                    tgtNav[i].classList.add("active");
                    let actedPn = el.querySelector(".tab-content .tab-pane.active");
                    if(actedPn) actedPn.classList.remove("active");
                    tgtPane[i].classList.add("active");
                });
            }
        });
    },
    registerLocalSearch: function() {
        const locSearch = new LocalSearch({ path: "/search.json" });
        const searchcon = document.querySelector(".search-overlay");
        const resultcon = searchcon.querySelector(".result-container");
        document.querySelector(".main-menu a.menu-search").addEventListener("click", () => {
            searchcon.classList.add("active");
            if(!locSearch.isfetched) locSearch.fetchData();
        });
        searchcon.querySelector(".search-close").addEventListener("click", () => {
            searchcon.classList.remove("active");
        });

        const inputBox = searchcon.querySelector("input.search-input");
        const searchic = searchcon.querySelector(".search-icon i");
        inputBox.disabled = true;
        resultcon.innerHTML = "<span>等待索引文件加载,请稍候...</span>";
        searchic.className = "fa fa-spinner fa-spin-pulse fa-fw";
        window.addEventListener("search:loaded", () => {
            inputBox.disabled = false;
            inputBox.placeholder = "键入以进行搜索,用空格(' ')和'-'分割关键词";
            resultcon.innerHTML = "<span>直接键入以搜索文章,上限 80 字符</span>";
            searchic.className = "fa fa-search fa-fw";
        })
        inputBox.addEventListener("input", () => {
            if(!locSearch.isfetched) return;
            const searchText = inputBox.value.trim().toLowerCase();
            if(searchText.length == 0) {
                resultcon.innerHTML = "<span>直接键入以搜索文章,上限 80 字符</span>";
                searchic.className = "fa fa-search fa-fw";
                return;
            }
            let resultitems = locSearch.getResultItems(searchText.split(/[-\s]+/));
            if(resultitems.length == 0) {
                resultcon.innerHTML = "<span>没有匹配的结果,换个关键词吧</span>";
                searchic.className = "fa fa-file-circle-xmark fa-fw";
                return;
            }
            searchic.className = "fa fa-info fa-fw";
            resultitems.sort((x, y) => {
                if(x.includedCount > y.includedCount) return -1;
                else if(x.includedCount < y.includedCount) return 1;
                else {
                    if(x.hitCount > y.hitCount) return -1;
                    else if(x.hitCount < y.includedCount) return 1;
                    else return 0;
                }
            });
            resultcon.innerHTML = "<ul>" + resultitems.map(result => result.item).join('') + "</ul>";
            pjax.refresh(resultcon);
        });
    },
    pjaxReqProg: {
        tmObj: 0,
        set: function(str) {
            var target = document.querySelector("aside.pjax-prog");
            if(target.hasAttribute("data-timeout")) {
                clearTimeout(this.tmObj);
                target.removeAttribute("data-timeout");
            }
            target.classList.add("active");
            target.innerHTML = str;
        },
        destroy: function(delay) {
            var target = document.querySelector("aside.pjax-prog");
            if(target.hasAttribute("data-timeout")) clearTimeout(this.tmObj);
            else target.setAttribute("data-timeout", "");
            this.tmObj = setTimeout(() => {target.classList.remove("active");target.removeAttribute("data-timeout")}, delay);
        }
    }
}

window.addEventListener("DOMContentLoaded", function() {
    console.log("Hexo 8.1.1 https://hexo.io/ \nTheme author is the author of this site.")
    lite.registerPjaxStart();
    lite.activeMenuItem();
    lite.registerCodeCopy();
    lite.registerTOC();
    lite.activeTOC();
    lite.registerBack2top();
    lite.registerTabClick();
    lite.renderKatex();
    lite.registerLocalSearch();
});
window.addEventListener("pjax:success", function() {
    if(!window.location.hash) anime({ targets: document.scrollingElement, scrollTop: 0, duration: 200, easing: "linear" });
    const sa = document.querySelector(".search-overlay.active"); if(sa) {sa.classList.remove("active");}
    lite.pjaxReqProg.set("加载完成"); lite.pjaxReqProg.destroy(1000);
    lite.activeMenuItem();
    lite.registerCodeCopy();
    lite.registerTOC();
    lite.activeTOC();
    lite.registerTabClick();
    lite.renderKatex();
});
window.addEventListener("pjax:send", () => {lite.pjaxReqProg.set("加载中,请稍候...");});
window.addEventListener("pjax:error", function() {lite.pjaxReqProg.set("加载失败,请尝试在新标签页内打开"); lite.pjaxReqProg.destroy(1000);});
window.addEventListener("scroll", function() {lite.activeTOC();});
With Astro .css
@layer starlight.components {
  .starlight-aside {
    border-inline-start:.25rem solid var(--sl-color-asides-border);
    color:var(--sl-color-white);
    padding:1rem
  }
  .starlight-aside--note {
    --sl-color-asides-text-accent:var(--sl-color-blue-high);
    --sl-color-asides-border:var(--sl-color-blue);
    background-color:var(--sl-color-blue-low)
  }
  .starlight-aside--tip {
    --sl-color-asides-text-accent:var(--sl-color-purple-high);
    --sl-color-asides-border:var(--sl-color-purple);
    background-color:var(--sl-color-purple-low)
  }
  .starlight-aside--caution {
    --sl-color-asides-text-accent:var(--sl-color-orange-high);
    --sl-color-asides-border:var(--sl-color-orange);
    background-color:var(--sl-color-orange-low)
  }
  .starlight-aside--danger {
    --sl-color-asides-text-accent:var(--sl-color-red-high);
    --sl-color-asides-border:var(--sl-color-red);
    background-color:var(--sl-color-red-low)
  }
  .starlight-aside__title {
    font-size:var(--sl-text-h5);
    font-weight:600;
    line-height:var(--sl-line-height-headings);
    color:var(--sl-color-asides-text-accent);
    align-items:center;
    gap:.5rem;
    display:flex
  }
  .starlight-aside__icon {
    width:1em;
    height:1em;
    font-size:1.333em
  }
  .starlight-aside__title+.starlight-aside__content {
    margin-top:.5rem
  }
  .starlight-aside__content:empty {
    display:none
  }
  .starlight-aside__content a {
    color:var(--sl-color-asides-text-accent)
  }
  .kudos:where(.astro-sa7oidru) svg {
    color:var(--sl-color-orange)
  }
  .label-icon:where(.astro-pl7p4lbc) {
    font-size:var(--sl-label-icon-size);
    inset-inline-start:0
  }
  .caret:where(.astro-pl7p4lbc) {
    font-size:var(--sl-caret-size);
    inset-inline-end:0
  }
}
@layer starlight.utils {
  .sr-only {
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border-width:0;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    position:absolute;
    overflow:hidden
  }
  .sl-hidden {
    display:none
  }
  .sl-flex {
    display:flex
  }
  .sl-block {
    display:block
  }
  @media (width>=50rem) {
    .md\:sl-hidden {
      display:none
    }
    .md\:sl-flex {
      display:flex
    }
    .md\:sl-block {
      display:block
    }
  }
  @media (width>=72rem) {
    .lg\:sl-hidden {
      display:none
    }
    .lg\:sl-flex {
      display:flex
    }
    .lg\:sl-block {
      display:block
    }
  }
  [data-theme=light] .light\:sl-hidden,
  [data-theme=dark] .dark\:sl-hidden {
    display:none
  }
  [dir=rtl] .rtl\:flip:not(:where([dir=rtl] [dir=ltr] *)) {
    transform:matrix(-1,0,0,1,0,0)
  }
}
section:where(.astro-3f4rfcpt) {
  font-size:var(--sl-text-sm);
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem 1.5rem
}
a:where(.astro-3f4rfcpt) {
  color:var(--sl-color-gray-3);
  align-items:center;
  gap:.5rem;
  text-decoration:none
}
a:where(.astro-3f4rfcpt):hover {
  color:var(--sl-color-white)
}
.container:where(.astro-2qw6dox2) {
  max-width:45rem;
  margin-inline:auto;
  container-type:inline-size
}
aside:where(.astro-2qw6dox2) {
  border:1px solid var(--sl-color-gray-5);
  background-color:var(--sl-color-gray-6);
  box-shadow:var(--sl-shadow-md);
  line-height:var(--sl-line-height-headings);
  border-radius:.5rem;
  grid-template-rows:repeat(4,auto);
  grid-template-columns:1fr;
  grid-template-areas:"graphics""title""tagline""cta";
  align-items:center;
  gap:.75rem .5rem;
  margin-top:2rem;
  padding:1rem;
  display:grid
}
.graphics:where(.astro-2qw6dox2) {
  grid-area:graphics;
  justify-content:center;
  display:flex
}
.scrimba-bubble:where(.astro-2qw6dox2) {
  z-index:1
}
.graphics:where(.astro-2qw6dox2)>:where(.astro-2qw6dox2)+:where(.astro-2qw6dox2) {
  margin-inline-start:-.25rem
}
img:where(.astro-2qw6dox2) {
  outline:4px solid var(--sl-color-gray-6);
  border-radius:999rem;
  max-width:3rem;
  height:auto
}
h2:where(.astro-2qw6dox2) {
  text-wrap:balance;
  text-align:center;
  color:var(--sl-color-white);
  grid-area:title;
  margin:0!important;
  font-weight:400!important
}
p:where(.astro-2qw6dox2) {
  font-size:var(--sl-text-sm);
  text-align:center;
  text-wrap:balance;
  grid-area:tagline
}
.cta:where(.astro-2qw6dox2) {
  text-align:center;
  grid-area:cta;
  justify-content:center;
  font-weight:500;
  transition:opacity .2s ease-out;
  font-size:var(--sl-text-sm)!important;
  padding-block:.6875rem!important
}
.cta:where(.astro-2qw6dox2):hover {
  opacity:.8
}
@container (width>40rem) {
  aside:where(.astro-2qw6dox2) {
    grid-template:"title graphics cta""tagline graphics cta"/auto auto auto;
    row-gap:.25rem
  }
  h2:where(.astro-2qw6dox2) {
    text-align:left
  }
  p:where(.astro-2qw6dox2) {
    text-align:start
  }
}
.container:where(.astro-3njibiid) {
  max-width:45rem;
  margin-inline:auto;
  container-type:inline-size
}
aside:where(.astro-3njibiid) {
  border:1px solid var(--sl-color-purple);
  background-color:var(--sl-color-gray-6);
  box-shadow:var(--sl-shadow-md);
  border-radius:.5rem;
  grid-template:"image title""tagline tagline""cta cta"/4rem 1fr;
  align-items:center;
  gap:.75rem .5rem;
  margin-top:2rem;
  padding:1rem;
  display:grid
}
img:where(.astro-3njibiid) {
  grid-area:image;
  width:100%;
  height:auto;
  margin:-.25rem
}
h2:where(.astro-3njibiid) {
  line-height:var(--sl-line-height-headings);
  text-wrap:balance;
  grid-area:title;
  font-weight:400!important
}
p:where(.astro-3njibiid) {
  font-size:var(--sl-text-2xs);
  line-height:var(--sl-line-height-headings);
  flex-wrap:wrap;
  grid-area:tagline;
  justify-content:center;
  align-items:center;
  column-gap:.25rem
}
svg:where(.astro-3njibiid) {
  width:1.5em;
  height:1.5em
}
.cta:where(.astro-3njibiid) {
  text-align:center;
  grid-area:cta;
  justify-content:center;
  font-weight:500;
  transition:opacity .2s ease-out;
  font-size:var(--sl-text-sm)!important;
  padding-block:.6875rem!important
}
.cta:where(.astro-3njibiid):hover {
  opacity:.8
}
@container (width>24rem) {
  aside:where(.astro-3njibiid) {
    grid-template-areas:"image title""image tagline""cta cta";
    row-gap:.25rem
  }
  .cta:where(.astro-3njibiid) {
    margin-top:.5rem
  }
  p:where(.astro-3njibiid) {
    justify-content:start
  }
}
@container (width>40rem) {
  aside:where(.astro-3njibiid) {
    grid-template-columns:4rem auto auto;
    grid-template-areas:"image title cta""image tagline cta"
  }
  .cta:where(.astro-3njibiid) {
    margin-top:0
  }
}
.container:where(.astro-zfz25xw4) {
  max-width:45rem;
  margin-inline:auto;
  container-type:inline-size
}
aside:where(.astro-zfz25xw4) {
  border:1px solid var(--sl-color-gray-5);
  background-color:var(--sl-color-gray-6);
  box-shadow:var(--sl-shadow-md);
  border-radius:.5rem;
  grid-template:"image title""tagline tagline""cta cta"/4rem 1fr;
  align-items:center;
  gap:.75rem .5rem;
  margin-top:2rem;
  padding:1rem;
  display:grid
}
img:where(.astro-zfz25xw4) {
  border-radius:999rem;
  grid-area:image;
  width:100%;
  height:auto;
  margin:-.25rem
}
h2:where(.astro-zfz25xw4) {
  line-height:var(--sl-line-height-headings);
  text-wrap:balance;
  color:var(--sl-color-white);
  grid-area:title;
  font-weight:400!important
}
p:where(.astro-zfz25xw4) {
  font-size:var(--sl-text-2xs);
  line-height:var(--sl-line-height-headings);
  text-align:center;
  text-wrap:balance;
  grid-area:tagline
}
svg:where(.astro-zfz25xw4) {
  width:1.5em;
  height:1.5em
}
.cta:where(.astro-zfz25xw4) {
  text-align:center;
  grid-area:cta;
  justify-content:center;
  font-weight:500;
  transition:opacity .2s ease-out;
  font-size:var(--sl-text-sm)!important;
  padding-block:.6875rem!important
}
.cta:where(.astro-zfz25xw4):hover {
  opacity:.8
}

Katex