* {
    font-family: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: rgb(22, 22, 22);
}

/* colors */
* {
    --text-secondary: grey;
    --text-grey: rgb(88, 88, 88);
    --text-body: rgb(60, 60, 67);
    --text-active: rgb(61, 60, 151);
    --border-color: rgba(202, 202, 202, 0.395);
    --chrome: #F6F8FA;
    --chrome-border: rgb(227, 227, 227);
    --code-bg: rgb(240, 240, 240);
}

body {
    padding: 0;
    margin: 0;
}

.toolbar .content {
    display: flex;
    width: calc(1000pt - 40pt);
    flex-direction: row;
}

.toolbar a {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    padding: 0pt 5pt;
    background-color: transparent;
    transition: background-color 0.05s linear;
    white-space: nowrap;
}

.toolbar .content>a:first-of-type:hover {
    background-color: rgb(228, 228, 228);
    border-radius: 5pt;
}

.toolbar {
    display: flex;
    padding: 5pt 10pt;

    background-color: var(--chrome);
    height: 30pt;
    border-bottom: 0.5pt solid var(--chrome-border);
}

.toolbar ul li.small {
    margin: 0pt 2.5pt;
}

.toolbar h1 {
    font-size: 12pt;
    font-weight: 500;
}

.toolbar ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.toolbar ul li {
    display: inline-block;
    margin-right: 10pt;
    height: 30pt;
    line-height: 30pt;
    font-size: 10pt;
    font-weight: 500;
}

.toolbar ul li a {
    text-decoration: none;
    color: black;
}

.toolbar ul li a:hover {
    opacity: 0.6;
}

.toolbar .logo {
    width: 15pt;
    margin-right: 5pt;
}

.toolbar ul li img {
    height: 12pt;
    display: inline-block;
    margin: 10pt 0pt;
}

.toolbar .overlay {
    position: fixed;
    top: 41pt;
    left: 0;
    right: 0pt;
    background-color: white;
    z-index: 9999;
    height: calc(100vh - 30pt);
    text-align: center;
    display: none;
    transition: opacity 0.2s ease-in-out;
}

body.open-menu .toolbar .overlay {
    display: block;
}

body.open-menu {
    overflow: hidden;
}

@media (min-width: 500pt) {
    .toolbar .overlay, body.open-menu .toolbar .overlay {
        top: 30pt;
        display: none;
    }
    ul.more {
        display: none;
    }
}

@media (max-width: 500pt) {
    .toolbar>.content>ul:not(.more) {
        display: none;
    }
    ul.more {
        display: block;
    }
}

.toolbar .overlay ul {
    display: block;
    text-align: center;
    margin: auto;
    margin-top: 40pt;
}

.toolbar .overlay ul li {
    display: block;
    margin: auto;
    text-align: center !important;
    width: 220pt;
    max-width: 100vw;
    border-bottom: 0.5pt solid rgba(128, 128, 128, 0.27);
    font-size: 14pt;
    padding: 5pt 0pt;
}

.toolbar .overlay ul li.small {
    border: none;
    display: inline-block;
    width: auto;
    opacity: 0.8;
}

.toolbar .overlay ul li a {
    text-align: center;
    display: inline;
}

.hero {
    margin: auto;
    margin-top: 60pt;
    text-align: center;
}

.hero .block {
    width: 420pt;
    max-width: 90vw;
    text-align: center;
    margin: auto;
    margin-top: 30pt;
}

.hero .logo {
    width: 120pt;
}

.hero p {
    text-align: center;
    width: 360pt;
    max-width: 100%;
    font-size: 16pt;
    margin: auto;
}

.hero h1 {
    font-size: 40pt;
    font-weight: 500;
}

@media (max-width: 600pt) {
    .hero {
        margin-top: 25pt;
    }

    .hero .block {
        width: 100%;
        margin-top: 10pt !important;
    }

    .hero h1 {
        margin-top: 0pt;
        font-size: 32pt;
    }
}

.content {
    width: 1000pt;
    max-width: 100%;
    margin: auto;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: center;
}

.categories .tile {
    flex: 1 1 0px;
    min-width: 150pt;
    width: auto;
    margin: 2pt;
    height: 60pt;
    line-height: 60pt;
    border-radius: 5pt;
    overflow: hidden;
    padding: 5pt;

    border: 0pt solid rgb(120, 120, 120);
    position: relative;
    cursor: pointer;
    text-decoration: none;;
}

.categories .tile.placeholder {
    opacity: 0.0;
    cursor: default;
}

/* add white opacity layer on top */
.categories .tile::after {
    background-color: white;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5pt;
    opacity: 0.07;
}

.categories .tile:hover::after {
    opacity: 0.0;
}


.categories .tile h3 {
    margin: 0;
    padding: 0;
    color: white;
    font-weight: 600;
}

* {
    --red: #F1284F;
    --ocean: #4A5463;
    --blue: #2C5FEA;
    --purple: #AF3188;
    --orange: #DA5918;
}

/* classes for each color as bg */
.red {
    /* background-color: var(--red) !important; */
    background-image: linear-gradient(34deg, var(--red) 0%, white 400%);
}

.ocean {
    /* background-color: var(--ocean) !important; */
    background-image: linear-gradient(12deg, var(--ocean) 0%, white 400%);
}

.blue {
    /* background-color: var(--blue) !important; */
    background-image: linear-gradient(-80deg, var(--blue) 0%, white 400%);
}

.purple {
    /* background-color: var(--purple) !important; */
    background-image: linear-gradient(90deg, var(--purple) 0%, white 400%);
}

.orange {
    /* background-color: var(--orange) !important; */
    background-image: linear-gradient(12deg, var(--orange) 0%, white 400%);
}

.white-grey {
    background-image: linear-gradient(90deg, rgb(154, 146, 146) 0%, white 400%);
}

.btn {
    background-color: #e1e1e1;
    border-width: 0pt;
    padding: 8pt 12pt;
    font-size: 12pt;
    font-weight: 500;
    margin: 20pt 0pt;
    border-radius: 5pt;
    display: inline-block;
    text-decoration: none;
    margin-bottom: 10pt;
}

.btn:hover {
    background-color: #E8EBED;
    cursor: pointer;
}

.btn:active {
    background-color: #D1D6DB;
}

.btn.primary {
    background-color: #1e883e;
    color: white;
}

.btn.primary:hover {
    background-color: #007314;
}

.btn.primary:active {
    background-color: #005a0f;
}

.logo-composite {
    position: relative;
    width: 120pt;
    height: 160pt;
    margin: auto;
}

.logo-composite img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.logo-composite img.back {
    z-index: -2;
    transform: scale(2.0);
}

.side-by-side {
    display: flex;
    flex-wrap: wrap;
}

.lve-list .lve {
    border-radius: 5pt;
    font-family: monospace;
    text-align: left;
    padding: 8pt;
    line-height: 12pt;
    height: 30pt;
    border: 1pt solid rgb(213, 213, 213);
    box-shadow: 0pt 0pt 2pt 1pt rgba(213, 213, 213, 0.479);
    position: relative;
    display: block;
    margin-bottom: 8pt;
    text-decoration: none;
}

.lve-list .lve h3 {
    font-family: monospace;
    padding: 0;
    margin: 0;
    font-weight: normal;
    /* auto truncate */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.lve-list {
    padding: 0pt 15pt;
}

.lve label {
    font-size: 10pt;
    font-weight: 500;
    text-align: left;
    position: absolute;
    bottom: 5pt;
    color: var(--text-secondary);
    font-family: monospace;
}

.sub-category {
    font-size: 15pt;
    text-align: left;
    color: var(--text-secondary);
    font-family: monospace;
    margin-left: 5pt;
    margin-top: 15pt;
    margin-bottom:10pt;
    display:inline-block;
}

.lve label.right {
    right: 5pt;
    text-align: right;
}

.lve:hover {
    cursor: pointer;
}

.lve:hover h3 {
    color: blue;
}

.hero h2 {
    font-weight: normal;
    font-size: 14pt;
}

.hero {
    padding-bottom: 120pt;
}

.second-toolbar {
    background-color: #F6F8FA;
    margin: 0pt;
    border-bottom: 0.5pt solid var(--chrome-border);
}

.second-toolbar .bar>h3 {
    margin: 10pt 0pt;
    padding: 0;
}

.second-toolbar h3, h4 {
    margin: 0;
    padding-top: 5pt;
    padding-left: 0pt;
    font-family: monospace;
    font-weight: normal;
    color: var(--text-secondary);
    line-break: anywhere;
    /* truncate */
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
}

.second-toolbar h3 {
    padding-top: 20pt;
    font-size: 16pt;
    padding-bottom: 0pt;
}

.second-toolbar h4 {
    font-size: 12pt;
}

.second-toolbar h3>a {
    font-family: monospace;
    text-decoration: none;
    color: var(--text-secondary);
}

.second-toolbar h3 .name {
    font-weight: bold;
    color: black;
}

.second-toolbar h3 a:first-child:hover {
    text-decoration: underline;
}

ul.tabs {
    padding: 0;
    margin: 0;
    padding-left: 15pt;
    display: block;
    display: flex;
}

ul.tabs li.right.btn {
    padding: 0;
    margin: 0;
    font-size: 10pt;
}

ul.tabs ul.actions {
    display: inline-block;
    margin-right: 25pt;
}

ul.tabs ul.actions {
    margin-left: auto;
    margin-right: 20pt;
    padding-top: 8pt;
}

ul.tabs ul.actions .btn {
    font-size: 8pt;
    margin: 0;
    padding: 6pt 5pt;
    background: transparent;
}

ul.tabs ul.actions .btn:hover {
    background-color: rgb(240, 240, 240);
}

ul.tabs ul.actions li:hover {
    border: none;
}

ul.tabs li {
    display: inline-block;
    cursor: pointer;
    list-style-type: none;
}
ul.tabs li a {
    display: block;
    padding: 10pt;
}

ul.tabs li:hover {
    border-bottom: 2pt solid rgb(200, 200, 200);
}

ul.tabs li a {
    text-decoration: none;
}

ul.tabs li.active {
    font-weight: bold;
    border-bottom: 2pt solid #2C5FEA;
}

@media (max-width: 300pt) {
    ul.tabs ul.actions {
        display: none;
    }
}

.second-toolbar .category {
    flex-direction: column;
    width: 60%;
    position: relative;
    top: -12pt;
}

.second-toolbar .bar h3 {
    padding-right: 15pt;
    line-break: loose;
}

.second-toolbar .bar h4 {
    padding-right: 15pt;
    line-break: loose;
}

.second-toolbar .bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-left: 20pt;
    padding: 5pt 0pt;
}

code.command {
    background-color: rgb(226, 226, 226);
    font-family: monospace;
    padding: 5pt;
    margin-left: 0pt;
    margin-right: 20pt;
    font-size: 10pt;
    border-radius: 5pt;
    line-height: 20pt;
    position: relative;
    padding-right: 40pt;
    overflow: hidden;
    line-break: anywhere;
}

code.command>button {
    border: none;
    height: 100%;
    width: 30pt;
    position: absolute;
    right: 0pt;
    top: 0pt;
    border-radius: 0pt 5pt 5pt 0pt;
}

button.copy {
    background-image: url("copy.svg");
    background-size: 15pt;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

button.copy:hover {
    background-color: rgb(200, 200, 200);
}

button.copy:active {
    background-color: rgb(180, 180, 180);
}

code.command label {
    position: absolute;
    top: calc(100% + 10pt);
    left: 0pt;
    padding: 5pt;
    background-color: rgb(226, 226, 226);
    opacity: 0.8;
    font-size: 10pt;
    border-radius: 5pt;
}

code.command:hover {
    overflow: visible;
}


span.badge {
    font-family: monospace;
    padding: 4pt 10pt;
    border-radius: 5pt;
    background-color: rgb(240, 240, 240);
    /* do not break */
    white-space: nowrap;
}

span.badge.active {
    color: white;
    background-color: #2C5FEA;
}

span.badge.severity {
    color: white;
    background-color: #ec2416;
}

span.badge.severity:hover {
    color: white;
    background-color: #9a1a11;
}

span.badge.jailbreak {
    color: white;
    background-color: #066950;
}

span.badge.jailbreak:hover {
    color: white;
    background-color: #044a3a;
}

span.badge.paper {
    color: white;
    background-color: #cea775;
}

span.badge.paper:hover {
    color: white;
    background-color: #a48a5f;
}

.affected {
    display: flex;
    flex-direction: row;
    padding-left: 20pt;
    align-items: center;
    justify-content: flex-start;
    color: var(--text-secondary);
    font-size: 10pt;
    height: auto;
    padding-top: 2pt;
    padding-bottom: 2pt;
    flex-wrap: wrap;
}

.affected .badge {
    margin-right: 10pt;
    margin-top: 5pt;
    display: inline-block;
}

a.badge-link {
    text-decoration: none !important;
}

span.badge:hover {
    cursor: pointer;
    background-color: rgb(220, 220, 220);
}

span.badge.active:hover {
    background-color: #2C5FEA;
}

.markdown {
    padding: 0pt 20pt;
}

.markdown blockquote {
    background-color: var(--chrome);
    padding: 1pt 10pt;
    border-radius: 5pt;
    display: flex;
    width: auto;
    margin-left: 0pt;
}

.markdown code {
    background-color: var(--code-bg);
    padding: 2pt 5pt;
    border-radius: 5pt;
    white-space: pre-wrap;
    line-break: anywhere;
    font-family: monospace;
    line-height: 1.5;
    margin-top: 5pt;
}

.markdown pre code {
    display: block;
    padding: 10pt;
    overflow-x: auto;
    font-size: 1.0em;
    white-space: pre-wrap;
}

.content.category {
    padding-top: 10pt;
}

.small {
    font-size: 10pt;
}

span.small {
    color: var(--text-secondary);
}

.lve-details.instances #instances {
    display: flex;
}

.lve-details.description #instances {
    display: none;
}

.lve-details.description #description {
    display: flex;
}

.lve-details.instances #description {
    display: none;
}

.lve-details #instances {
    padding: 10pt 20pt;
    position: relative;
}

.lve-details #description {
    display: flex;
    flex-direction: row;
}

.lve-details .sidebar {
    border-left: 1pt solid var(--border-color);
    margin: 10pt;
    padding: 0pt 20pt;
    min-width: 200pt;
    max-width: 600pt;
}

@media (max-width: 600pt) {
    .lve-details #description {
        flex-direction: column;
        align-items: stretch !important;
    }

    .lve-details #description .markdown:first-of-type {
        padding: 0pt 10pt !important;
    }

    .lve-details .sidebar {
        border-left: none;
        max-width: 100%;
        padding: 0pt 10pt;
        border-top: 1pt solid var(--border-color);
    }

    .lve-details #instances {
        padding: 0pt;
    }
    
    .lve-details #instances .instance {
        border-radius: 0;
        border-left-width: 0;
        border-right-width: 0;
        padding: 10pt !important;
        background-color: white;
    }

    .lve-details #instances .instance:first-of-type {
        margin-top: 10pt;
    }
}

.lve-details #description>.markdown {
    flex: 1;
}

.lve-details .sidebar h3 {
    padding: 0;
    margin: 10pt 0pt;
    color: black !important;
}

.lve-details .sidebar label, .infopanel label {
    margin-right: 5pt;
    color: grey;
    margin-top: 10pt;
    display: inline-block;
    font-size: 10pt;
}

.content.docs {
    display: flex;
    flex-direction: row;
    max-width: calc(100vw - 50pt);
    width: calc(1000pt - 10pt) !important;
    margin: auto;
}

.content.docs h1 {
    line-height: 1.2;
}

.content.docs>ul {
    flex: 1 1 0px;
    min-width: 200pt;
    max-width: 300pt;
    margin: 0;
    padding: 0;
    list-style-type: none;
    padding-right: 20pt;
    padding-top: 10pt;
}

.content.docs>ul li {
    margin: 0;
    padding: 10pt;
    margin-bottom: 10pt;
    font-weight: 500;
    font-size: 12pt;
}

.content.docs .markdown {
    font-size: 16px;
    font-weight: normal;
    line-height: 28px;
    color: var(--text-body);
    padding-bottom: 100pt;
}

.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
    font-weight: 500;
    margin: 20pt 0pt;
    color: rgb(43, 43, 43);
    text-align: left;
}

.content.docs .markdown h3 {
    border-top: 1pt solid rgba(128, 128, 128, 0.409);
    padding-top: 20pt;
}

.markdown table {
    border-collapse: collapse;
    width: 100%;
    margin: 20pt 0pt;
    border: 1pt solid rgb(200, 200, 200);
}

.markdown table th {
    border: 1pt solid rgb(200, 200, 200);
    padding: 5pt;
    background-color: rgb(240, 240, 240);
}

.markdown table td {
    border: 1pt solid rgb(200, 200, 200);
    padding: 5pt;
}

.second-toolbar h3.right {
    margin-right: 20pt;
    position: relative;
}


.instances-viewer {
    width: 100%;
}

nav.left {
    min-width: 180pt;
    border-right: 1pt solid var(--border-color);
}

.mobile-nav {
    display: none;
}

.nav-dim {
    opacity: 0.0;
    z-index: -1;
}

@media (max-width: 600pt) {
    nav.left {
        position: fixed;
        top: 0pt;
        transition: left 0.2s ease-in-out;
        left: -100%;
        height: 100vh;
        background-color: var(--chrome);
        z-index: 100;
        box-shadow: 0pt 0pt 10pt 0pt rgba(0, 0, 0, 0.1);
    }

    .content.docs {
        padding-top: 40pt;
    }

    .mobile-nav {
        display: block;
        position: absolute;
        top: 40pt;
        left: 0pt;
        width: 100vw;
        background-color: var(--chrome);
        height: 20pt;
        padding: 5pt;
        line-height: 15pt;
        border-bottom: 0.5pt solid var(--chrome-border);
        padding-left: 17pt;

        font-size: 10pt;
    }

    .markdown {
        padding-left: 0pt !important;
        padding-right: 0pt !important;
    }

    .mobile-nav a {
        color: var(--text-secondary) !important;
        line-height: 20pt;
        cursor: pointer;
    }
    .mobile-nav a:hover {
        color: var(--text-grey) !important;
    }

    .mobile-nav.sticky {
        position: fixed;
        top: 0pt;
    }

    html.nav-open nav.left {
        left: 0pt;
    }

    .nav-dim {
        background-color: black;
        position: fixed;
        content: "";
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        opacity: 0.0;
        transition: opacity 0.2s ease-in-out;
    }

    html.nav-open .nav-dim {
        opacity: 0.5;
    }
}

nav ul {
    margin: 0;
    padding: 20pt;
}

nav ul li.header {
    font-weight: bold;
    margin: 0pt 0pt;
    border-top: 1pt solid var(--border-color);
    padding-top: 15pt;
    margin-top: 15pt;
    font-size: 10pt;
    display: block;
    margin-bottom: 8pt;
}

nav ul li {
    list-style-type: none;
    font-size: 11pt;
    font-weight: 450;
}

nav ul li a {
    text-decoration: none;
    color: var(--text-grey);
    line-height: 25pt;
    height: 27pt;
    display: block;
}

nav ul li.active a {
    color: var(--text-active);
}

.markdown div.subtitle {
    font-size: 14pt;
    display: block;
    margin-top: -10pt;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 20pt;
}

.markdown table {
    line-break: loose;
}

pre.promptdown {
    padding: 10pt;
    border: 1pt solid var(--chrome-border);
    background-color: var(--chrome);
}

pre.promptdown .promptdown-bubble {
    position: relative;
    padding-top: 20pt;
    max-width: 100%;
    padding-right: 10pt !important;
    margin-bottom: 10pt !important;
    display: block;
    font-size: 12pt !important;
    text-align: left;
}

pre.promptdown .promptdown-bubble.user:before {
    content: 'user';
    color: white;
    position: absolute;
    top: 2pt;
    right: 5pt;
    font-family: monospace;
}

pre.promptdown .promptdown-bubble.assistant:before {
    content: 'assistant';
    color: grey;
    position: absolute;
    top: 2pt;
    right: 5pt;
    font-family: monospace;
}

pre.promptdown .promptdown-bubble-container.user {
    text-align: left;
}

pre.promptdown .promptdown-bubble.system:before {
    content: 'system';
    color: grey;
    position: absolute;
    top: 2pt;
    right: 5pt;
    font-family: monospace;
}

pre.promptdown .promptdown-bubble.system {
    background-color: rgb(234, 233, 233);
}

pre.promptdown p {
    margin: 0;
}

pre.promptdown .promptdown-var.empty {
    padding-right: 1pt;
}

.lve-details pre.promptdown .promptdown-bubble-container:last-of-type {
    margin-bottom: -8pt !important;
}

.prompt {
    position: relative;
}

.prompt pre.promptdown {
    padding-top: 27pt;
}

.prompt .tabs {
    position: absolute;
    top: 1pt;
    right: 14pt;
    z-index: 99;
    font-size: 10pt;
}

.prompt .tabs li,
.prompt .tabs li:hover {
    padding: 5pt;
    padding-bottom: 2pt;
    color: var(--text-grey);
    border-bottom-width: 1pt;
}

.prompt .tabs li.active {
    border-bottom-width: 1pt;
    color: var(--text-body);
}

.prompt h3 {
    margin-left: 20pt;
}

.instance:first-of-type {
    margin-top: 15pt;
}

.instance {
    border-radius: 5pt;
    border: 1pt solid var(--chrome-border);
    margin-top: 25pt;
    margin-bottom: 25pt;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0pt 0pt;
}

.instance h1 {
    font-size: 14pt;
    margin: 0pt;
    margin-top: 10pt;
    margin-bottom: 0pt;
    padding: 0pt;
}

.instance pre.promptdown {
    margin-top: 0pt;
}

.instance .side-by-side {
    display: flex;
    flex-direction: row;
    padding: 0pt 0pt;
}

.instance .side-by-side .prompt {
    flex: 1;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
    background-color: var(--chrome);
    border-left: 1pt solid var(--chrome-border);
    border-bottom-left-radius: 0pt;
    border-top-left-radius: 0pt;
    
    border-bottom-right-radius: 5pt;
    border-top-right-radius: 5pt;
}

.instance .side-by-side .prompt>pre.promptdown {
    border: none;
    flex: 1;
}

.instance .metadata {
    margin: 0pt 10pt;
    min-width: 120pt;
    flex: 1;
    height: 100%;
    padding-bottom: 10pt;
}

.instance h4 {
    margin-top: 5pt;
    margin-bottom: 5pt;
}

.instance pre.expand {
    margin: 0pt 0pt;
}

code.passed, code.failed {
    font-size: 10pt;
}

code.passed {
    background-color: #007314;
    color: white;
}

code.failed {
    background-color: #F1284F;
    color: white;
}

pre.expand {
    background-color: var(--code-bg) !important;
    border-radius: 5pt;
    padding-top: 5pt;
}

pre.expand h4 {
    padding-left: 10pt;
    position: relative;
    top: -2pt;
    cursor: pointer;
    color: var(--text-body);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

pre.expand h4:before {
    content: '▶︎';
    font-size: 10pt;
    font-weight: 500;
    margin-right: 5pt;
}

pre.expand.expanded h4:before {
    content: '▼';
}

pre.expand {
    height: 30pt;
    overflow: hidden;
}

pre.expand code {
    color: transparent !important;
    background-color: transparent;
}

pre.expand.expanded {
    height: auto;
}

pre.expand.expanded code {
    color: var(--text-body) !important;
}

.instances-viewer.with-select {
    padding-top: 30pt !important;
}

#instances select {
    position: absolute;
    top: 7.5pt;
    left: 20pt;
    font-size: 15pt;
    height: 25pt;
}

#instances {
    position: relative;
    min-height: 220pt;
}

#instances .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-secondary);
    font-size: 10pt;
    text-align: left;
    line-break: loose;
}


@media (max-width: 600pt) {
    .instance .side-by-side {
        flex-direction: column;
    }
    .instance .metadata {
        margin: 0pt 0pt !important;
    }
    #instances select {
        left: 5pt;
    }
    #instances {
        background-color: var(--chrome);
    }

    .instance .side-by-side .prompt {
        background-color: var(--chrome);
        border-left: none;
        border-top: 1pt solid var(--chrome-border);
        margin: 0pt -10pt;
        border-radius: 0pt;
        margin-bottom: -10pt;
    }
}

.block.users {
    margin-top: 80pt !important;
}

.lve-list.users h3 {
    line-height: 30pt;
}

.lve-list.users a {
    cursor: default;
}

.lve-list.users a:hover h3 {
    color: inherit;
}


.lve-list.users .right {
    top: 7.5pt;
    right: 10pt;
    font-size: 14pt;
    line-height: 30pt;
}

.markdown.lve-description {
    font-size: 16px;
    font-weight: normal;
    line-height: 28px;
    color: var(--text-body);
}

.markdown.lve-description h3 {
    margin-bottom: 5pt;
}

.footer {
    margin: 50pt auto;
    opacity: 0.5;
    font-size: 10pt;
    text-align: center;
}

.tag-icon {
    width: 10pt;
    margin-left: -5pt;
    margin-top: -1pt;
    vertical-align: middle;
}

.hero a.banner {
    display: block;
    background-color: var(--blue);
    width: 700pt;
    max-width: calc(100vw - 30pt);
    position: relative;
    top: -20pt;
    margin: auto;
    border-radius: 2pt;
    padding: 5pt;
    color: white;
    text-align: left;
    text-decoration: none;
    margin-bottom: 10pt;
}

.hero a.banner b {
    color: white;
    
}

img + em {
    display: block;
    text-align: center;
    color: gray;
    font-size: 10pt;
} 

.blog-post h1 {
    margin-bottom: 10pt;
}

.blog-post h1 a {
    text-decoration: none !important;
}

.blog-post h2 {
    font-size: 14pt;
}

.blog-post .blog-down-banner {
    flex-direction: row;
    text-align: center;
}

.blog-post .blog-down-banner img {
    margin: 20pt;
    margin-bottom: 0pt;
}

.blog-post .blog-down-banner h2 {
    flex-direction: row;
    text-align: center;
}

.content.docs .markdown .blog-post h3 {
    border-top: none;
    padding-top: 0pt;
}

.blog-date {
    color: var(--text-secondary);
    font-size: 10pt;
    display: block;
    /* margin-top: -15pt;
    margin-bottom: -5pt; */
}

.blog-subtitle {
    color: var(--text-secondary);
    font-size: 14pt;
    margin-bottom: 10pt;
}

.blog-post {
    margin: auto;
    border-bottom: 0.5pt solid grey;
    display: block;
    width: 100%;
    margin-bottom: 50pt;
    padding-bottom: 20pt;
    font-size: 12pt;
    line-height: 2.0;
    color: var(--text-body);
    max-width: 500pt;
}

.blog-post p a {
    line-break: anywhere;
}

.blog-authors {
    font-size: 10pt;
}

.blog-post>p>img {
    max-width: 100%;
    margin: auto;
    display: block;
    border-radius: 4pt;
    margin-top: 20pt;
    margin-bottom: 20pt;
}

@media (max-width: 600pt) {
    .blog-post>p>img {
        width: 100%;
        max-width: calc(100% - 20pt);
        padding: 10pt 0pt;
        margin: auto;
    }
}

.content.blog {
    display: flex;
    flex-direction: column; 
    align-items: center;
}

h3.tag {
    position: relative;
    left: -20pt;
    top: 6pt;
}

.aboutus {
    display: block;
    margin-top: 5pt;
}

@media (max-width: 600pt) {
    .content.blog {
        padding-top: 20pt;
    }
}