/* OpenDB! Aero sky glass around a calm, readable page. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --ink: #10243a;
    --ink-2: #3c5670;
    --line: #cfe2f3;
    --card: rgba(255, 255, 255, 0.92);
    --blue: #1478c8;
    --green: #2e9a1c;
    --serif: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* headings + article text */
    --sans: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
body {
    min-height: 100vh; display: flex; flex-direction: column; color: var(--ink); font-family: var(--sans);
    background: radial-gradient(1100px 380px at 50% -140px, rgba(255, 255, 255, 0.85), transparent 70%),
        linear-gradient(180deg, #5fb8f3 0px, #a9dcfb 260px, #e9f6ff 520px, #f4f9fd 100%);
    background-attachment: fixed;
}
a { color: var(--blue); }
a:hover { color: #0b5a99; }

/* header */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 14px 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.logo { width: 46px; height: 46px; filter: drop-shadow(0 3px 8px rgba(0, 60, 120, 0.35)); }
.brand b { display: block; font-size: 24px; text-shadow: 0 1px 2px rgba(0, 60, 120, 0.5); }
.brand small { display: block; font-size: 12px; opacity: 0.95; text-shadow: 0 1px 2px rgba(0, 60, 120, 0.5); }
.search { flex: 1 1 320px; display: flex; gap: 8px; max-width: 620px; }
.search input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 16px; border-radius: 999px; border: 1px solid #9cc9ec; background: linear-gradient(180deg, #f3f9ff, #fff); box-shadow: inset 0 2px 4px rgba(0, 60, 120, 0.15); color: var(--ink); }
.search input:focus { outline: none; border-color: var(--blue); box-shadow: inset 0 2px 4px rgba(0, 60, 120, 0.15), 0 0 0 3px rgba(20, 120, 200, 0.25); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nav a { color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 7px 12px; border-radius: 999px; text-shadow: 0 1px 2px rgba(0, 60, 120, 0.5); }
.nav a:hover, .nav a.on { background: rgba(255, 255, 255, 0.25); color: #fff; }

.gel {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none;
    font: 700 14px var(--sans); color: #fff !important; padding: 8px 18px; border-radius: 999px; border: 1px solid #0b5a99;
    background: linear-gradient(180deg, #8fd0ff 0%, #1e8fe0 50%, #0b66b5 100%);
    box-shadow: 0 3px 8px rgba(11, 102, 181, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6); text-shadow: 0 1px 1px rgba(0, 50, 100, 0.55) !important;
}
.gel::before { content: ""; position: absolute; left: 6%; right: 6%; top: 1px; height: 50%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.12)); pointer-events: none; }
.gel:hover { filter: brightness(1.07); }
.gel.green { border-color: #1f6e12; background: linear-gradient(180deg, #b5ef8c 0%, #49b82d 50%, #2a8a19 100%); box-shadow: 0 3px 8px rgba(46, 154, 28, 0.4), inset 0 1px 0 rgba(255,255,255,0.6); }
.gel.plain { color: var(--ink) !important; text-shadow: none !important; border-color: #b9d5ec; background: linear-gradient(180deg, #fff, #e8f3fc); box-shadow: 0 2px 5px rgba(0, 60, 120, 0.12), inset 0 1px 0 #fff; }
.gel.small { font-size: 12.5px; padding: 6px 13px; }
.gel:disabled { opacity: 0.5; pointer-events: none; }

/* main area */
.view { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 8px 24px 30px; outline: none; }
.card { background: var(--card); border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 60, 120, 0.15); padding: 22px 26px; }
.muted { color: var(--ink-2); }
h1.page { font-family: var(--serif); font-size: 32px; font-weight: 600; margin-bottom: 6px; }

/* home */
.hero { text-align: center; padding: 26px 20px 30px; color: #fff; }
.hero h1 { font-size: 40px; text-shadow: 0 2px 8px rgba(0, 60, 120, 0.45); }
.hero p { font-size: 17px; max-width: 680px; margin: 8px auto 0; text-shadow: 0 1px 3px rgba(0, 60, 120, 0.5); }
.stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.stat { background: rgba(255, 255, 255, 0.25); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; padding: 6px 14px; font-weight: 700; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.collection { display: flex; flex-direction: column; gap: 8px; }
.collection h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.collection h2 a { text-decoration: none; color: var(--ink); }
.home-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 860px) { .home-row { grid-template-columns: minmax(0, 1fr); } }
.featured h2, .side-box h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: 8px; }
.featured h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin-bottom: 6px; }
.featured h3 a { color: var(--ink); text-decoration: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; text-decoration: none; color: #0b4f86; background: linear-gradient(180deg, #f1f8ff, #dceefc); border: 1px solid #b8d8f2; }
.tag:hover { border-color: var(--blue); }

/* lists of entries */
.list { display: flex; flex-direction: column; }
.item { display: flex; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.item:last-child { border-bottom: 0; }
.item:hover .item-title { text-decoration: underline; }
.item-title { font-family: var(--serif); font-size: 19px; color: var(--blue); }
.item p { color: var(--ink-2); font-size: 14px; line-height: 1.45; margin-top: 2px; }
.item .meta { font-size: 12px; color: #6a8299; margin-top: 4px; }
.item mark { background: #fff2a8; color: inherit; border-radius: 3px; padding: 0 2px; }
.thumb { flex: none; width: 96px; height: 72px; border-radius: 10px; object-fit: contain; background: #eef6fd; border: 1px solid var(--line); }
.badge { display: inline-block; vertical-align: 2px; margin-left: 6px; font: 700 10.5px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #fff; }
.badge.article { background: #1e8fe0; }
.badge.media { background: #c2410c; }
.badge.paper { background: #7c3aed; }
.badge.local { background: #0f766e; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.tile { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 3px 10px rgba(0, 60, 120, 0.08); }
.tile img { width: 100%; height: 140px; object-fit: contain; background: #eef6fd; border-radius: 10px; }
.tile b { font-family: var(--serif); font-weight: 600; color: var(--blue); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 14px; }
.filters select { font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }

/* an entry */
.entry { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 900px) { .entry { grid-template-columns: minmax(0, 1fr); } }
.entry-main { min-width: 0; }
.crumbs { font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.lead { font-size: 17px; color: var(--ink-2); margin: 2px 0 16px; line-height: 1.5; }
.authors { font-size: 15px; margin-bottom: 10px; }
.abstract { background: #f5f0ff; border: 1px solid #ddd0fb; border-radius: 12px; padding: 12px 16px; margin: 10px 0 18px; line-height: 1.6; }
.abstract b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #6d28d9; margin-bottom: 4px; }
.figure { margin: 6px 0 18px; text-align: center; }
.figure img { max-width: 100%; max-height: 520px; border-radius: 12px; background: #eef6fd; border: 1px solid var(--line); }
.figure figcaption, .kd-doc figcaption { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.kd-doc { font-family: var(--serif); font-size: 15.5px; line-height: 1.75; }
.kd-doc h2 { font-size: 24px; font-weight: 600; margin: 26px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.kd-doc h3 { font-size: 19px; margin: 20px 0 6px; }
.kd-doc p, .kd-doc ul, .kd-doc ol, .kd-doc blockquote, .kd-doc pre, .kd-doc figure { margin: 0 0 14px; }
.kd-doc ul, .kd-doc ol { padding-left: 26px; }
.kd-doc li { margin: 3px 0; }
.kd-doc blockquote { border-left: 4px solid #9cc9ec; padding: 4px 14px; color: var(--ink-2); background: linear-gradient(90deg, rgba(156, 201, 236, 0.28) 0%, rgba(156, 201, 236, 0.03) 100%); border-radius: 0 10px 10px 0; }
.kd-doc code { font-family: var(--mono); font-size: 0.86em; background: #eef4fa; border: 1px solid #dbe7f2; padding: 1px 5px; border-radius: 6px; }
.kd-doc pre { background: #0f2236; color: #dff1ff; padding: 12px 14px; border-radius: 12px; overflow: auto; }
.kd-doc pre code { background: none; border: 0; padding: 0; color: inherit; }
.kd-doc figure { text-align: center; }
.kd-doc figure img { max-width: 100%; max-height: 420px; border-radius: 12px; background: #eef6fd; border: 1px solid var(--line); }
.kd-doc a.missing { color: #c2410c; }
.kd-doc sup a { text-decoration: none; }
.kd-doc ol.refs { font-size: 15px; }
.side { display: flex; flex-direction: column; gap: 14px; }
.side-box { background: var(--card); border: 1px solid rgba(255,255,255,0.95); border-radius: 16px; padding: 14px 16px; box-shadow: 0 6px 18px rgba(0, 60, 120, 0.12); font-size: 14px; }
.infobox table { width: 100%; border-collapse: collapse; }
.infobox th { text-align: left; vertical-align: top; padding: 5px 8px 5px 0; color: var(--ink-2); font-weight: 600; width: 42%; }
.infobox td { padding: 5px 0; }
.infobox tr + tr th, .infobox tr + tr td { border-top: 1px solid var(--line); }
.cc0-box { background: linear-gradient(180deg, #f3fff0, #e3f8dc); border-color: #bfe7b2; }
.cc0-box p { line-height: 1.5; }
.pd-box { background: linear-gradient(180deg, #f1f8ff, #dcecfb); border-color: #b3d3ef; }
.pd-box p { line-height: 1.5; }
.pdbadge { display: inline-block; font: 800 12px var(--sans); color: #fff !important; background: #1d6fb8; border-radius: 999px; padding: 2px 9px; text-decoration: none; margin-right: 4px; }
.tpl-side-demo { max-width: 320px; }
.cc0 { display: inline-block; font: 800 12px var(--sans); color: #fff !important; background: #1d1d1d; border-radius: 999px; padding: 2px 9px; text-decoration: none; margin-right: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.side-box ul { padding-left: 18px; }
.side-box li { margin: 3px 0; }

/* editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 960px) { .editor { grid-template-columns: minmax(0, 1fr); } }
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field small { font-weight: 400; }
.field input, .field textarea, .field select { font: 15px var(--sans); color: var(--ink); padding: 9px 12px; border-radius: 10px; border: 1px solid #b9d5ec; background: #fbfdff; }
.field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.field textarea.body { min-height: 300px; font-family: var(--mono); font-size: 13.5px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20, 120, 200, 0.2); }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #e8f3fc; border: 1px solid #b9d5ec; gap: 2px; }
.seg button { font: 700 13px var(--sans); border: 0; background: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--ink-2); }
.seg button.on { color: #fff; background: linear-gradient(180deg, #8fd0ff, #1e8fe0 55%, #0b66b5); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; padding: 10px 12px; border-radius: 12px; background: #f3fff0; border: 1px solid #bfe7b2; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--green); }
.hint { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.preview-card { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow: auto; }
.problems { color: #b91c1c; font-size: 13.5px; }
.problems li { margin-left: 18px; }

/* modal + toast */
.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(8, 30, 52, 0.45); backdrop-filter: blur(4px); }
.modal[hidden] { display: none; }
.modal-card { width: min(640px, 100%); max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 17px; }
.modal-body { padding: 14px 18px 18px; overflow: auto; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.modal-body pre { background: #0f2236; color: #dff1ff; padding: 10px 12px; border-radius: 10px; overflow: auto; font: 12.5px var(--mono); white-space: pre-wrap; }
.modal-body ol { padding-left: 22px; }
.x { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink-2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; z-index: 40; padding: 10px 18px; border-radius: 999px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #8fd0ff, #1e8fe0 55%, #0b66b5); box-shadow: 0 6px 18px rgba(11, 102, 181, 0.45); transition: opacity 0.2s, transform 0.2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.foot { text-align: center; padding: 18px 24px 26px; font-size: 13px; color: var(--ink-2); line-height: 1.8; }
.empty { padding: 30px; text-align: center; color: var(--ink-2); }

/* Keydown documents: whole-line pieces, bullets and LaTeX */
.kd-doc .kd-line { margin: 0 0 10px; }
.kd-doc .kd-line .header-1, .kd-doc .kd-line .header-2, .kd-doc .kd-line .header-3, .kd-doc .kd-line .mega-header { display: block; font-family: var(--serif); }
.kd-doc .bulleted-list { display: list-item; list-style: disc; margin: 0 0 0 26px; padding-left: 4px; }
.kd-doc .kd-line + .kd-line .bulleted-list { margin-top: -4px; }
.kd-doc .blockquote-list { display: block; }
.kd-doc .tex-block { margin: 6px 0 16px; overflow-x: auto; overflow-y: hidden; }
.kd-doc .katex { font-size: 1.08em; }
.kd-doc .katex-display { margin: 0.4em 0; }
.tex-raw { color: #6d28d9; }
.modal-body .kd-guide-row { display: flex; gap: 12px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.modal-body .kd-guide-row code { flex: 0 0 42%; font: 12px var(--mono); color: var(--ink-2); word-break: break-all; }
.modal-body .kd-guide-title { font-weight: 800; margin: 14px 0 6px; color: var(--blue); }
.kd-doc .bulleted-list::before { content: none; }

/* Templates: Wikipedia-style notices ({{stub}}, {{more citations}}, {{file improvement}}, ...) */
.tpl { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #c8ccd1; border-left: 8px solid #36c; border-radius: 10px; background: #fbfbfb; font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.tpl-icon { flex: none; width: 30px; height: 30px; object-fit: contain; }
.tpl-content { border-left-color: #f28500; background: #fff9f2; }
.tpl-style { border-left-color: #fc3; background: #fffdf2; }
.tpl-notice { border-left-color: #36c; background: #f5f8ff; }
.tpl-move { border-left-color: #9932cc; background: #fbf5ff; }
.tpl-file { border-left-color: #0f9b8c; background: #f1fbf9; }
.tpl-more { text-decoration: none; margin-left: 2px; font-size: 13px; }
.tpl-more-icon { width: 15px; height: 15px; vertical-align: -2px; }
.tpl-chip-icon { width: 14px; height: 14px; vertical-align: -2px; }
.tpl-stub { font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--line); }
.tpl-stub .tpl-icon { width: 20px; height: 20px; vertical-align: -4px; }
.tpl-hatnote { font-family: var(--sans); font-style: italic; font-size: 14px; color: var(--ink-2); margin: -4px 0 12px; padding-left: 26px; }
.tpl-tag { font-family: var(--sans); font-size: 11px; font-style: italic; white-space: nowrap; }
.tpl-tag a { text-decoration: none; }
.tpl-chip { display: inline-block; font: 600 12px var(--sans); padding: 0 8px; border-radius: 999px; background: #eef4fa; border: 1px solid #dbe7f2; text-decoration: none; }
.tpl-unknown { font-family: var(--mono); font-size: 0.86em; color: #b91c1c; background: #fee2e2; border-radius: 6px; padding: 1px 5px; }
.tpl-group { font-family: var(--serif); font-size: 19px; font-weight: 600; margin: 22px 0 8px; }
.tpl-list { display: flex; flex-direction: column; }
.tpl-row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 14px; }
.tpl-row:last-child { border-bottom: 0; }
.tpl-row code { font: 13px var(--mono); color: var(--blue); }
.tpl-row small { color: #6a8299; white-space: nowrap; }
.tpl-row:hover code { text-decoration: underline; }
@media (max-width: 700px) { .tpl-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.tpl-code { background: #0f2236; color: #dff1ff; padding: 10px 14px; border-radius: 12px; font: 13px var(--mono); overflow: auto; }
.tpl-demo { padding: 14px; border: 1px dashed #b9d5ec; border-radius: 12px; background: #fff; }
.tpl-pick-group { display: block; margin-top: 6px; color: var(--blue); }
.tpl-picks { display: flex; flex-direction: column; gap: 6px; }
.tpl-pick { display: flex; flex-direction: column; gap: 2px; text-align: left; font: 13px var(--sans); color: var(--ink-2); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fbfdff; cursor: pointer; }
.tpl-pick:hover { border-color: var(--blue); background: #f1f8ff; }
.tpl-pick code { font: 13px var(--mono); color: var(--ink); }

/* music and videos */
/* OpenDB's own player: a glossy Aero bar with play, seek, time, volume, speed and download (videos add fullscreen) */
.rp { width: min(620px, 100%); margin: 0 auto; border-radius: 16px; overflow: hidden; border: 1px solid #9cc9ec; background: linear-gradient(180deg, #f3faff, #dcefff); box-shadow: 0 6px 18px rgba(0, 70, 140, 0.18), inset 0 1px 0 #fff; text-align: left; }
.rp-video { width: min(760px, 100%); background: #0b1c2c; }
.rp video.rp-media { display: block; width: 100%; max-height: 520px; background: #000; cursor: pointer; }
.rp:fullscreen { width: 100%; border-radius: 0; display: flex; flex-direction: column; background: #000; }
.rp:fullscreen video.rp-media { flex: 1; max-height: none; height: 100%; }
.rp-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(214, 236, 255, 0.92) 100%); }
.rp-video .rp-bar { border-top: 1px solid rgba(255, 255, 255, 0.4); }
.rp button, .rp-dl { flex: none; display: inline-grid; place-items: center; border: 1px solid #9cc9ec; background: linear-gradient(180deg, #ffffff, #e3f1fd); color: #0b5a9e; border-radius: 999px; width: 32px; height: 32px; padding: 0; cursor: pointer; box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0, 60, 120, 0.15); text-decoration: none; }
.rp button:hover, .rp-dl:hover { border-color: #3b9ae1; background: linear-gradient(180deg, #ffffff, #cfe7fc); }
.rp button:focus-visible, .rp-dl:focus-visible, .rp input:focus-visible { outline: 3px solid rgba(20, 120, 200, 0.45); outline-offset: 2px; }
.rp svg { width: 18px; height: 18px; }
/* the big glossy play orb */
.rp .rp-play { width: 42px; height: 42px; color: #fff; border-color: #1b6fbf; background: radial-gradient(circle at 50% 30%, #8fd0ff 0%, #2a8be0 55%, #155fae 100%); box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.6), 0 3px 8px rgba(20, 100, 190, 0.35); }
.rp .rp-play:hover { background: radial-gradient(circle at 50% 30%, #a6dbff 0%, #3a98ea 55%, #1866b8 100%); }
.rp .rp-play svg { width: 20px; height: 20px; }
.rp-time, .rp-dur { flex: none; font: 600 12px var(--mono); color: #23527c; min-width: 36px; text-align: center; }
.rp input[type="range"] { --rp-p: 0%; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #2a8be0 0 var(--rp-p), #c9e2f7 var(--rp-p) 100%); box-shadow: inset 0 1px 2px rgba(0, 50, 100, 0.25); cursor: pointer; margin: 0; }
.rp .rp-seek { flex: 1; min-width: 60px; }
.rp .rp-vol { flex: none; width: 70px; }
.rp input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #b9dcf8); border: 1px solid #3b8ad0; box-shadow: 0 1px 3px rgba(0, 50, 100, 0.35); }
.rp input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #b9dcf8); border: 1px solid #3b8ad0; }
.rp .rp-speed { width: auto; min-width: 40px; padding: 0 8px; font: 700 12px var(--sans); }
.rp .rp-dl { width: auto; gap: 5px; padding: 0 12px 0 9px; display: inline-flex; align-items: center; font: 700 12px var(--sans); color: #fff; border-color: #2c8a2c; background: linear-gradient(180deg, #8be06a, #3fa83a); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 2px 5px rgba(40, 120, 40, 0.3); }
.rp .rp-dl:hover { background: linear-gradient(180deg, #9ae97a, #46b440); border-color: #2c8a2c; }
.rp-on .rp-play { box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.6), 0 0 0 4px rgba(42, 139, 224, 0.2), 0 3px 8px rgba(20, 100, 190, 0.35); }
/* narrow screens: volume and speed step aside */
@media (max-width: 520px) { .rp .rp-vol, .rp .rp-speed { display: none; } .rp .rp-dl span { display: none; } .rp .rp-dl { padding: 0; width: 32px; } }
@media (max-width: 420px) { .rp-bar { gap: 5px; padding: 8px; } .rp .rp-mute { display: none; } .rp-time, .rp-dur { min-width: 0; font-size: 11px; } .rp .rp-seek { min-width: 40px; } }
.audio-thumb, .video-thumb { position: relative; display: grid; place-items: center; overflow: hidden; }
.audio-thumb { font-size: 30px; background: linear-gradient(180deg, #e0f2fe, #bae6fd); }
.video-thumb { background: #0f2236; }
.video-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-thumb .play { position: relative; color: #fff; font-size: 22px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.audio-thumb small, .video-thumb small { position: absolute; right: 6px; bottom: 4px; font: 700 11px var(--sans); color: #fff; background: rgba(15, 34, 54, 0.7); padding: 1px 6px; border-radius: 999px; }
.tile .tile-media { width: 100%; height: 140px; object-fit: contain; background: #eef6fd; border-radius: 10px; }

/* Quotes ("> ") and callout boxes ("> [!NOTE]" and friends): glossy Aero panels */
.kd-doc .odb-quote { position: relative; margin: 0 0 16px; padding: 12px 18px 12px 46px; border: 0; border-left: 5px solid #38bdf8; border-radius: 0 14px 14px 0; background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%); color: var(--ink); font-style: italic; box-shadow: 0 2px 8px rgba(14, 116, 144, 0.08), inset 0 1px 0 #fff; }
.kd-doc .odb-quote::before { content: "“"; position: absolute; left: 12px; top: -4px; font: 700 44px/1 Georgia, serif; color: #38bdf8; opacity: 0.7; }
.kd-doc .odb-quote cite { display: block; margin-top: 6px; font-style: normal; font-weight: 700; font-size: 0.9em; color: var(--ink-2); }
.kd-doc .odb-callout { --co: #0284c7; --co-bg: #e0f2fe; margin: 0 0 16px; padding: 10px 16px 12px; border: 1px solid color-mix(in srgb, var(--co) 35%, transparent); border-left: 6px solid var(--co); border-radius: 12px; background: linear-gradient(180deg, #ffffff 0%, var(--co-bg) 100%); box-shadow: 0 3px 10px color-mix(in srgb, var(--co) 14%, transparent), inset 0 1px 0 #fff; }
.kd-doc .odb-callout-title { font-weight: 800; color: var(--co); margin-bottom: 4px; }
.kd-doc .odb-callout-body { color: var(--ink); }
.kd-doc .odb-callout-tip { --co: #059669; --co-bg: #d1fae5; }
.kd-doc .odb-callout-important { --co: #7c3aed; --co-bg: #ede9fe; }
.kd-doc .odb-callout-warning { --co: #b45309; --co-bg: #fef3c7; }
.kd-doc .odb-callout-caution { --co: #dc2626; --co-bg: #fee2e2; }
.kd-doc .odb-callout-fact { --co: #0d9488; --co-bg: #ccfbf1; }
.kd-doc .odb-indent { margin-top: 0; }
.kd-doc .odb-callout-icon { width: 20px; height: 20px; vertical-align: -4px; }

/* The editor's Highlight button: a dropdown panel of every highlight and chip style, each a dropdown of its colors */
.hl-wrap { position: relative; display: inline-block; }
.hl-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: min(560px, 92vw); max-height: min(70vh, 560px); overflow-y: auto; padding: 10px 12px 12px; border: 1px solid #b9d5ec; border-radius: 14px; background: linear-gradient(180deg, #ffffff, #f2f8fe); box-shadow: 0 14px 40px rgba(0, 60, 120, 0.25), inset 0 1px 0 #fff; text-align: left; }
.hl-pop .hint { margin: 0 0 8px; }
.hl-group > b { display: block; margin: 10px 0 6px; color: var(--blue); font-size: 13px; }
.hl-cat { border: 1px solid var(--line); border-radius: 10px; background: #fbfdff; margin-bottom: 6px; }
.hl-cat[open] { border-color: #9cc9ec; background: #fff; }
.hl-cat summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; cursor: pointer; font: 600 13px var(--sans); color: var(--ink); white-space: pre; }
.hl-cat summary:hover { background: #f1f8ff; border-radius: 10px; }
.hl-cat-name { overflow: hidden; text-overflow: ellipsis; }
.hl-cat-peek { flex: none; font-size: 13px; pointer-events: none; }
.hl-colors { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px 12px; }
.hl-color { font: 600 13px var(--sans); padding: 6px 8px; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; line-height: 1.6; }
.hl-color:hover, .hl-color:focus-visible { border-color: #9cc9ec; background: #f1f8ff; outline: none; }


/* =====================================================================
   Aero revamp: a frosted-glass taskbar header with gel navigation buttons, glass cards with a shine,
   Vista-style window title bars on the side boxes, and a sky with light bubbles over green hills.
   ===================================================================== */
body {
    background:
        radial-gradient(160px 160px at 8% 22%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
        radial-gradient(90px 90px at 88% 14%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%),
        radial-gradient(220px 220px at 76% 38%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 70%),
        radial-gradient(60px 60px at 30% 9%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%),
        radial-gradient(1200px 420px at 50% -160px, rgba(255, 255, 255, 0.9), transparent 70%),
        radial-gradient(1400px 340px at 20% 112%, #8fd36a 0%, #5fb83c 45%, transparent 46%),
        radial-gradient(1500px 360px at 85% 118%, #a6e07e 0%, #6cc447 44%, transparent 45%),
        linear-gradient(180deg, #3aa3ec 0px, #7fc7f6 220px, #c6e8fc 480px, #eaf6ff 760px, #f2fbf0 100%);
    background-attachment: fixed;
}
/* the taskbar */
.top { padding: 12px 18px 6px; position: sticky; top: 0; z-index: 20; }
.aero-bar {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 10px 16px; border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 48%, rgba(170, 220, 255, 0.28) 52%, rgba(120, 190, 245, 0.35) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 28px rgba(0, 70, 140, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.aero-bar::before { content: ""; position: absolute; left: 14px; right: 14px; top: 2px; height: 45%; border-radius: 18px 18px 40px 40px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); pointer-events: none; }
.brand, .search, .nav { position: relative; }
.brand b { color: #fff; }
.search input { border-color: rgba(255, 255, 255, 0.95); background: linear-gradient(180deg, #ffffff, #eef7ff); box-shadow: inset 0 2px 5px rgba(0, 60, 120, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6); }
.search .gel svg, .nav svg { width: 18px; height: 18px; flex: none; }
.search .gel svg { fill: none; }
/* navigation: glossy glass buttons with icons */
.nav { gap: 6px; }
.nav a.nav-btn {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 999px;
    color: #0b4a80; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); font-size: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(235, 246, 255, 0.85) 48%, rgba(205, 231, 252, 0.85) 52%, rgba(225, 241, 255, 0.95) 100%);
    border: 1px solid rgba(120, 180, 230, 0.9);
    box-shadow: 0 2px 6px rgba(0, 60, 120, 0.18), inset 0 1px 0 #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav a.nav-btn svg { color: #1269b0; }
.nav a.nav-btn:hover { color: #08375f; background: linear-gradient(180deg, #ffffff 0%, #e3f3ff 48%, #b9e0ff 52%, #dff1ff 100%); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45), 0 4px 12px rgba(20, 120, 200, 0.35), inset 0 1px 0 #fff; transform: translateY(-1px); }
.nav a.nav-btn.on { color: #fff; text-shadow: 0 1px 1px rgba(0, 50, 100, 0.55); border-color: #0b5a99; background: linear-gradient(180deg, #8fd0ff 0%, #1e8fe0 50%, #0b66b5 100%); box-shadow: 0 3px 8px rgba(11, 102, 181, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.nav a.nav-btn.on svg { color: #0b66b5; }
.nav .nav-add svg { stroke: currentColor; }
/* glass cards with a shine across the top */
.card, .side-box {
    position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 252, 255, 0.86) 100%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 14px 36px rgba(0, 60, 120, 0.18), 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 0 0 1px rgba(140, 195, 240, 0.35);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70px; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); pointer-events: none; }
/* side boxes: their heading becomes a Vista-style window title bar */
.side-box { border-radius: 16px; overflow: hidden; }
.side-box > h2:first-child {
    margin: -14px -16px 10px; padding: 8px 14px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
    text-shadow: 0 1px 1px rgba(0, 50, 100, 0.55);
    background: linear-gradient(180deg, #8fd0ff 0%, #3b9ee8 48%, #1d7fd3 52%, #2f93e2 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(0, 60, 120, 0.25);
}
.side-box.cc0-box { background: linear-gradient(180deg, rgba(240, 255, 232, 0.95), rgba(214, 245, 196, 0.9)); }
.side-box.pd-box { background: linear-gradient(180deg, rgba(238, 247, 255, 0.95), rgba(207, 228, 248, 0.9)); }
/* the hero gets a glossy title with a soft reflection */
.hero h1 { color: #fff; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 3px rgba(0, 70, 140, 0.55), 0 6px 18px rgba(0, 70, 140, 0.45); -webkit-box-reflect: below -14px linear-gradient(transparent 62%, rgba(255, 255, 255, 0.22)); }
.hero p { text-shadow: 0 1px 2px rgba(0, 60, 120, 0.6); }
/* long formulas scroll sideways in their own box instead of widening the page */
.katex-display { position: relative; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.kd-doc .katex { position: relative; }
.stat { background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2)); border-color: rgba(255, 255, 255, 0.85); box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(0, 60, 120, 0.15); }
/* tags: little gel chips */
.tag { background: linear-gradient(180deg, #ffffff 0%, #e8f4ff 48%, #d3e9fb 52%, #e6f3ff 100%); box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0, 60, 120, 0.12); }
/* the footer: a glass strip */
.foot { background: none; border: 0; padding: 18px; }
.foot-glass { max-width: 1180px; margin: 0 auto; padding: 12px 18px; border-radius: 16px; text-align: center; line-height: 1.7;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(230, 245, 255, 0.6)); border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 22px rgba(0, 60, 120, 0.14), inset 0 1px 0 #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* dialogs: an Aero window */
.modal-card { border: 1px solid rgba(255, 255, 255, 0.95); overflow: hidden; }
.modal-head { color: #fff; text-shadow: 0 1px 1px rgba(0, 50, 100, 0.55); border-bottom: 0;
    background: linear-gradient(180deg, #8fd0ff 0%, #3b9ee8 48%, #1d7fd3 52%, #2f93e2 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.modal-head .x { color: #fff; }
/* phones: the taskbar stacks, and the nav buttons keep just their icons when space is tight */
@media (max-width: 700px) {
    .top { position: static; padding: 8px 10px 4px; }
    .aero-bar { padding: 10px; gap: 10px; }
    .nav { width: 100%; justify-content: space-between; }
}
@media (max-width: 460px) {
    .nav a.nav-btn span, .nav .nav-add span { display: none; }
    .nav a.nav-btn, .nav .nav-add { padding: 8px 12px; }
}
@media (prefers-reduced-transparency: reduce) { .aero-bar, .card, .side-box, .foot-glass { backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* phones: long chips and highlights wrap onto more lines instead of running off the screen */
@media (max-width: 600px) {
    .kd-doc [class*="-chip"], .kd-doc .us-chip { white-space: normal !important; max-width: 100%; text-align: center; }
}

/* ---------- Lites: shared code and files, like Gists! ---------- */
.badge.lite { background: #0e7490; }
.lite-files { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.lite-file { border: 1px solid #b9d5ec; border-radius: 14px; overflow: hidden; background: #fbfdff; box-shadow: 0 3px 10px rgba(0, 60, 120, 0.08); }
.lite-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; background: linear-gradient(180deg, #ffffff 0%, #e6f3fd 100%); border-bottom: 1px solid #cfe2f3; font: 13px var(--sans); }
.lite-name { display: inline-flex; align-items: center; gap: 6px; font: 700 14px var(--mono); color: var(--ink); }
.lite-name svg { width: 18px; height: 18px; color: var(--blue); flex: none; }
.lite-lang { font: 700 10.5px var(--sans); letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.lite-size { color: #5b7590; font-size: 12px; }
.lite-btns { margin-left: auto; display: flex; gap: 6px; }
.lite-code { display: grid; grid-template-columns: auto minmax(0, 1fr); overflow: auto; max-height: 560px; background: #fff; }
.lite-code pre { margin: 0; padding: 10px 12px; font: 13px/1.55 var(--mono); white-space: pre; tab-size: 4; background: none; border: 0; border-radius: 0; box-shadow: none; }
.lite-nums { text-align: right; color: #94a9bd; user-select: none; border-right: 1px solid #e3eef8; background: #f6fafe; position: sticky; left: 0; }
.lite-src code { font: inherit; background: none; padding: 0; color: #12263a; }
.lt-c { color: #5f7d5a; font-style: italic; }
.lt-s { color: #b4530c; }
.lt-n { color: #7c3aed; }
.lt-k { color: #0b67b2; font-weight: 700; }
.lt-t { color: #0e7490; font-weight: 700; }
.lite-toc { margin: 0; padding-left: 18px; font: 13px var(--mono); }
.lite-forked { margin-top: -6px; }
.field-title { margin: 6px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.field-title small { font-weight: 400; }
.lite-edit-list { display: flex; flex-direction: column; gap: 12px; }
.lite-edit { border: 1px solid #b9d5ec; border-radius: 12px; overflow: hidden; background: #fbfdff; }
.lite-edit-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: linear-gradient(180deg, #fff, #eaf5fe); border-bottom: 1px solid #cfe2f3; }
.lite-fname { flex: 1; min-width: 0; font: 600 14px var(--mono); padding: 6px 10px; border-radius: 8px; border: 1px solid #b9d5ec; background: #fff; color: var(--ink); }
.lite-fcode { display: block; box-sizing: border-box; width: 100%; min-height: 180px; resize: vertical; border: 0; padding: 10px 12px; font: 13px/1.55 var(--mono); tab-size: 4; white-space: pre; overflow: auto; background: #fff; color: var(--ink); }
.lite-fcode:focus, .lite-fname:focus { outline: 2px solid #38bdf8; outline-offset: -2px; }
/* #/embed/<id>: only the files, for an <iframe> on another site */
body.odb-embed .top, body.odb-embed .foot { display: none; }
body.odb-embed .view { padding: 8px; max-width: none; }
.lite-embed-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 15px var(--sans); }
.lite-embed .lite-files { margin-top: 10px; }
@media (max-width: 640px) { .lite-btns { margin-left: 0; width: 100%; } }

/* ---------- Lite previews (opendb/lite-preview.js) ---------- */
.lite-preview:empty { display: none; }
.lite-preview { margin-top: 18px; }
.lp { border: 1px solid #b9d5ec; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 3px 10px rgba(0, 60, 120, 0.08); }
.lp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 10px; background: linear-gradient(180deg, #ffffff 0%, #e6f3fd 100%); border-bottom: 1px solid #cfe2f3; font: 13px var(--sans); }
.lp-title { color: var(--ink); margin-right: 6px; }
.lp-tab, .lp-btn { font: 700 12px var(--sans); border: 1px solid transparent; background: none; color: #0369a1; padding: 4px 11px; border-radius: 999px; cursor: pointer; }
.lp-tab:hover, .lp-btn:hover { background: rgba(255, 255, 255, 0.9); border-color: #bae6fd; }
.lp-tab.on { color: #fff; background: linear-gradient(180deg, #38bdf8, #0284c7); border-color: #0369a1; }
.lp-tab:focus-visible, .lp-btn:focus-visible { outline: 2px solid #f97316; outline-offset: 1px; }
.lp-sp { flex: 1; }
.lp-stage { position: relative; height: 440px; background: #f8fbff; resize: vertical; overflow: hidden; }
.lp-stage:fullscreen { height: 100vh; resize: none; }
.lp-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.lp-frame.lp-python { background: #0b1622; }
.lp-frame.lp-zonerider { background: #2b2f35; }
.lp-start { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; color: #3b5770; }
.lp-start p { margin: 0; max-width: 460px; }
.preview-card .lite-preview .lp-stage { height: 320px; }

/* ``` code block styles: ```js{terminal|app.js} and inline `code`{neon} */
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb { position: relative; margin: 14px 0; padding: 12px 16px; border-radius: 10px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; background: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1; counter-reset: kdln; tab-size: 4; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb code { background: none; border: 0; padding: 0; color: inherit; font: inherit; border-radius: 0; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb[data-title]::before { content: attr(data-title); display: block; margin: -12px -16px 10px; padding: 6px 16px; font: 600 11px/1.4 system-ui, sans-serif; letter-spacing: .04em; background: rgba(0,0,0,.08); border-radius: 10px 10px 0 0; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb[data-lang]:not([data-title])::after { content: attr(data-lang); position: absolute; top: 5px; right: 10px; font: 600 10px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-lines .kd-ln { display: inline-block; min-width: 100%; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-lines .kd-ln::before { counter-increment: kdln; content: counter(kdln); display: inline-block; width: 2.4em; margin-right: 1em; text-align: right; opacity: .45; border-right: 1px solid currentColor; padding-right: .6em; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-terminal { background: #04100c; color: #4ade80; border: 1px solid #14532d; box-shadow: inset 0 0 24px rgba(74,222,128,.08); text-shadow: 0 0 6px rgba(74,222,128,.45); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-terminal .kd-ln::before { content: "$ "; opacity: .6; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-terminal.kd-cb-lines .kd-ln::before { content: counter(kdln); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-terminal[data-title]::before { background: #0a2a1c; color: #86efac; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-mac { background: #1e1e2e; color: #e2e8f0; border: 1px solid #0f172a; padding-top: 38px; box-shadow: 0 10px 28px rgba(15,23,42,.35); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb.kd-cb-mac::before { content: attr(data-title); position: absolute; left: 0; right: 0; top: 0; height: 28px; margin: 0; padding: 0 0 0 70px; line-height: 28px; text-align: left; font: 600 11px/28px system-ui, sans-serif; color: #94a3b8; background: radial-gradient(circle at 18px 14px, #ff5f57 5px, transparent 6px), radial-gradient(circle at 38px 14px, #febc2e 5px, transparent 6px), radial-gradient(circle at 58px 14px, #28c840 5px, transparent 6px), #2a2a3d; border-radius: 10px 10px 0 0; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-dark { background: #272822; color: #f8f8f2; border: 1px solid #1b1c17; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-dark[data-title]::before { background: #1b1c17; color: #a6e22e; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-paper { background: #fffdf5; color: #3b3a36; border: 1px solid #e7dfc6; border-left: 5px solid #d6c89a; background-image: repeating-linear-gradient(transparent 0 20px, rgba(14,165,233,.12) 20px 21px); background-position: 0 8px; border-radius: 4px 10px 10px 4px; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-paper[data-title]::before { background: #f3ead0; border-radius: 0 10px 0 0; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-blueprint { background: #0b3a6e; color: #e0f2fe; border: 2px solid #38bdf8; background-image: linear-gradient(rgba(186,230,253,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(186,230,253,.18) 1px, transparent 1px); background-size: 20px 20px; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-blueprint[data-title]::before { background: rgba(2,28,58,.7); color: #7dd3fc; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-neon { background: #0a0f1e; color: #67e8f9; border: 1px solid #22d3ee; box-shadow: 0 0 0 1px rgba(34,211,238,.4), 0 0 18px rgba(34,211,238,.45), inset 0 0 22px rgba(34,211,238,.1); text-shadow: 0 0 5px rgba(34,211,238,.6); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-neon[data-title]::before { background: rgba(34,211,238,.14); color: #a5f3fc; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-ember { background: linear-gradient(160deg, #2b1405, #3a1a06); color: #fed7aa; border: 1px solid #f97316; box-shadow: 0 0 16px rgba(249,115,22,.35); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-ember[data-title]::before { background: linear-gradient(90deg, #f97316, #fb923c); color: #431407; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-gel { background: linear-gradient(180deg, #38bdf8, #0369a1); color: #fff; border: 1px solid #7dd3fc; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -10px 18px rgba(3,52,100,.35), 0 6px 14px rgba(3,105,161,.35); text-shadow: 0 1px 2px rgba(3,52,100,.6); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-gel[data-title]::before { background: rgba(255,255,255,.2); }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-diff { background: #0f172a; color: #cbd5e1; border: 1px solid #334155; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-diff .kd-ln { display: inline-block; min-width: 100%; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-diff .kd-ln-add { background: rgba(34,211,238,.18); color: #67e8f9; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-diff .kd-ln-del { background: rgba(249,115,22,.2); color: #fdba74; }
:is(#wysiwyg-canvas, .kd-doc, body) pre.kd-cb-diff[data-title]::before { background: #1e293b; color: #94a3b8; }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic { padding: 1px 6px; border-radius: 6px; font: 0.92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 1px solid transparent; }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-terminal { background: #04100c; color: #4ade80; border-color: #14532d; text-shadow: 0 0 5px rgba(74,222,128,.5); }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-dark { background: #272822; color: #a6e22e; }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-paper { background: #fff8dc; color: #6b5a1e; border-color: #e7dfc6; }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-blueprint { background: #0b3a6e; color: #e0f2fe; border-color: #38bdf8; }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-neon { background: #0a0f1e; color: #67e8f9; border-color: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,.55); text-shadow: 0 0 4px rgba(34,211,238,.7); }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-ember { background: #3a1a06; color: #fdba74; border-color: #f97316; box-shadow: 0 0 8px rgba(249,115,22,.4); }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-gel { background: linear-gradient(180deg, #38bdf8, #0369a1); color: #fff; border-color: #7dd3fc; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); text-shadow: 0 1px 1px rgba(3,52,100,.6); }
:is(#wysiwyg-canvas, .kd-doc, body) code.kd-ic-key { background: linear-gradient(180deg, #fff, #e2e8f0); color: #0f172a; border-color: #94a3b8; border-bottom-width: 3px; border-radius: 5px; box-shadow: 0 1px 0 #fff inset; }

/* Quote lines typed one after another (each is its own box while you type) look like one quote; the Source and View modes join them for real */
:is(#wysiwyg-canvas, .kd-doc, .kd-content, body) .blockquote-list:not(.kd-bq) + .blockquote-list:not(.kd-bq) { margin-top: 0; border-top-right-radius: 0; }
:is(#wysiwyg-canvas, .kd-doc, .kd-content, body) .blockquote-list:not(.kd-bq):has(+ .blockquote-list:not(.kd-bq)) { margin-bottom: 0; border-bottom-right-radius: 0; }