:root {
  color-scheme: dark;
  --bg: #0d1117;
  --panel: #151b24;
  --panel-raised: #1b2430;
  --border: #2a3544;
  --text: #e6edf3;
  --muted: #8b9aaa;
  --accent: #55c7d9;
  --on-accent: #062127;
  --accent-soft: rgba(85, 199, 217, .14);
  --code: #111821;
  --page: #202833;
  --shadow: 0 18px 45px rgba(0, 0, 0, .25);
  --preview-canvas: #0d131a;
  --preview-canvas-tint: rgba(79, 127, 145, .15);
  --preview-quote-bg: rgba(64, 64, 64, .25);
  --preview-quote-text: #dce4e8;
  --preview-quote-default: #7c8795;
  --preview-code-text: #d9e2eb;
  --preview-code-accent: #f1c66e;
  --preview-mark: #8a6a00;
  --preview-mark-text: #fff;
  --preview-purple: #e2b4ff;
  --preview-tooltip-code: #d6bbec;
  --preview-gold: #e4ba60;
  --preview-soft-text: #82909c;
  --preview-id: #d4e7ed;
  --preview-runtime-text: #b8c4ce;
  --preview-runtime-bg: #17232d;
  --preview-runtime-border: #496776;
  --preview-runtime-title: #9cdae5;
  --preview-latex: #f1d36b;
  --preview-error: #ce8f8f;
  --preview-sound: #9ed7e3;
  --preview-tree-line: #5c8290;
  --preview-tree-folder: #e9c86f;
  --preview-diagram-bg: #0d141c;
  --preview-diagram-border: #344554;
  --preview-diagram-node: #111922;
  --preview-diagram-node-hover: #17232f;
  --preview-diagram-text: #d7dee7;
  --preview-diagram-stroke: #3a4b5d;
  --preview-diagram-accent: #7aa2f7;
  --preview-diagram-connector: #5d6c7c;
  --preview-chart-bg: #151d27;
  --preview-chart-border: #415364;
  --preview-chart-title: #e8edf2;
  --preview-chart-label: #9aadb6;
  --preview-chart-axis: #9ab0bb;
  --preview-chart-grid: rgba(143, 173, 190, .18);
  --preview-chart-value: #d9e6eb;
  --preview-chart-legend: #b8c7ce;
  --preview-alert-note: #638ef1;
  --preview-alert-tip: #61b75d;
  --preview-alert-important: #8755dd;
  --preview-alert-warning: #c79d3e;
  --preview-alert-caution: #e46150;
  --chart-series-1: #6ec6d7;
  --chart-series-2: #e6b85c;
  --chart-series-3: #e97979;
  --chart-series-4: #9c8ce0;
  --chart-series-5: #7bd69a;
  --chart-series-6: #ec8fca;
  --chart-series-7: #8cb8e8;
  --chart-series-8: #d59a6a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf1f5; --panel: #fff; --panel-raised: #f4f7fa; --border: #d7dfe7;
  --text: #17202a; --muted: #607080; --accent: #087f95; --on-accent: #fff; --accent-soft: rgba(8, 127, 149, .12);
  --code: #edf2f6; --page: #fff; --shadow: 0 18px 45px rgba(20, 40, 60, .12);
  --preview-canvas: #e8eef2; --preview-canvas-tint: rgba(50, 120, 137, .1);
  --preview-quote-bg: #edf4f7; --preview-quote-text: #283c48; --preview-quote-default: #637985;
  --preview-code-text: #263e4d; --preview-code-accent: #855000;
  --preview-mark: #f5dc8a; --preview-mark-text: #362500;
  --preview-purple: #71369a; --preview-tooltip-code: #653080;
  --preview-gold: #845700; --preview-soft-text: #627380; --preview-id: #24526a;
  --preview-runtime-text: #365161; --preview-runtime-bg: #eff6f7;
  --preview-runtime-border: #a9c4cd; --preview-runtime-title: #155f75;
  --preview-latex: #765200; --preview-error: #a63d3d; --preview-sound: #176c7f;
  --preview-tree-line: #53758a; --preview-tree-folder: #775600;
  --preview-diagram-bg: #edf3f6; --preview-diagram-border: #bacbd3;
  --preview-diagram-node: #fff; --preview-diagram-node-hover: #eaf5f8;
  --preview-diagram-text: #1d303e; --preview-diagram-stroke: #7e9fac;
  --preview-diagram-accent: #315eae; --preview-diagram-connector: #658391;
  --preview-chart-bg: #fff; --preview-chart-border: #afc3cd;
  --preview-chart-title: #203341; --preview-chart-label: #4f6875;
  --preview-chart-axis: #607c8a; --preview-chart-grid: rgba(73, 105, 121, .22);
  --preview-chart-value: #263c4a; --preview-chart-legend: #38515e;
  --preview-alert-note: #315fac; --preview-alert-tip: #287a3b;
  --preview-alert-important: #7142a9; --preview-alert-warning: #866000;
  --preview-alert-caution: #ac392e;
  --chart-series-1: #087a91; --chart-series-2: #a36b00;
  --chart-series-3: #b9454b; --chart-series-4: #6d53a8;
  --chart-series-5: #238352; --chart-series-6: #a2397c;
  --chart-series-7: #376da9; --chart-series-8: #965b30;
}

* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
button, input, textarea { font: inherit; }
button { color: inherit; border: 1px solid var(--border); background: var(--panel-raised); border-radius: 6px; padding: 7px 11px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
button:hover { border-color: var(--accent); background: var(--accent-soft); }
button:active { transform: translateY(1px); }
button.primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 700; }
.app-shell { height: 100vh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar { min-height: 58px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 750; letter-spacing: .01em; white-space: nowrap; }
.brand small { color: var(--muted); font-size: 11px; font-weight: 500; margin-left: 4px; }
.brand-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: var(--on-accent); background: var(--accent); font-weight: 900; }
.brand-github { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; color: var(--muted); }
.brand-github:hover, .brand-github:focus-visible { color: var(--accent); }
.brand-github svg { width: 19px; height: 19px; fill: currentColor; }
.topbar-actions, .editor-actions, .preview-actions { display: flex; gap: 7px; align-items: center; }
.topbar-actions { flex: 1 1 650px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.topbar-actions button { white-space: nowrap; }
.language-control { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.language-control select { max-width: 118px; padding: 6px 24px 6px 7px; color: var(--text); border: 1px solid var(--border); border-radius: 6px; background: var(--panel-raised); }
.reference-button { white-space: nowrap; }
.syntax-reference { width: min(1120px, calc(100vw - 32px)); height: min(780px, calc(100vh - 32px)); max-width: none; max-height: none; padding: 0; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
.syntax-reference::backdrop { background: rgba(3, 8, 12, .72); }
.syntax-reference[open] { display: flex; flex-direction: column; }
.reference-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.reference-header h2 { margin: 0 0 3px; font-size: 17px; }
.reference-header span { color: var(--muted); font-size: 11px; }
.reference-header-actions { display: flex; align-items: center; gap: 12px; }
.reference-language { width: clamp(110px, 18vw, 150px); padding: 6px 8px; color: var(--text); background: var(--panel-raised); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; }
.reference-close { width: 31px; height: 31px; display: grid; place-items: center; padding: 0; font-size: 20px; line-height: 1; }
.reference-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.reference-toolbar input { flex: 1; min-width: 0; padding: 9px 11px; color: var(--text); background: var(--panel-raised); border: 1px solid var(--border); border-radius: 5px; outline: none; font-size: 12px; }
.reference-toolbar span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.reference-body { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(200px, 270px) minmax(0, 1fr); }
.reference-results { min-height: 0; padding: 8px; overflow: auto; border-right: 1px solid var(--border); }
.reference-results h3 { margin: 14px 8px 5px; color: var(--accent); font-size: 11px; }
.reference-result { display: block; width: 100%; padding: 7px 9px; overflow-wrap: anywhere; border: 0; background: transparent; color: var(--muted); text-align: left; font-size: 12px; line-height: 1.35; }
.reference-result.depth-3 { padding-left: 18px; }
.reference-result:hover, .reference-result.active { color: var(--text); background: var(--accent-soft); }
.reference-result.active { box-shadow: inset 2px 0 var(--accent); }
.reference-empty { margin: 16px 9px; color: var(--muted); font-size: 12px; }
.reference-content.guide-page { max-width: none; min-width: 0; height: 100%; margin: 0; padding: 22px 27px 50px; overflow: auto; border: 0; border-radius: 0; box-shadow: none; background: var(--panel); }
.reference-content pre, .reference-content table { max-width: 100%; overflow: auto; }
.reference-content .guide-mermaid-diagram { max-width: 100%; }
.workspace { flex: 1; display: grid; grid-template-columns: minmax(210px, 255px) minmax(320px, 1fr) minmax(360px, 1.25fr); gap: 1px; min-height: 0; height: calc(100vh - 58px); overflow: hidden; background: var(--border); }
.panel { min-width: 0; min-height: 0; background: var(--panel); display: flex; flex-direction: column; overflow: hidden; }
.panel-heading { min-height: 51px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.panel-heading small { display: block; color: var(--muted); font-size: 10px; font-weight: 500; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.tree-actions { display: inline-flex; align-items: center; gap: 2px; }
.icon-button { border: 0; background: transparent; font-size: 19px; padding: 1px 5px; }
.project-name { display: block; padding: 12px 13px 9px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.project-name input, .tree-toolbar input { display: block; width: 100%; margin-top: 6px; color: var(--text); background: var(--panel-raised); border: 1px solid var(--border); border-radius: 5px; padding: 7px 8px; outline: none; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tree-toolbar { display: flex; align-items: center; gap: 8px; padding: 2px 13px 10px; }
.tree-toolbar input { margin: 0; font-size: 12px; }
.tree-toolbar span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.file-tree { overflow: auto; padding: 0 8px 14px; flex: 1; }
.tree-group-title { padding: 11px 7px 5px; color: var(--muted); font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-item { width: 100%; display: flex; align-items: center; gap: 7px; text-align: left; border: 0; background: transparent; padding: 7px 8px; color: var(--muted); font-size: 12px; }
.tree-item:hover, .tree-item.selected { color: var(--text); background: var(--accent-soft); }
.tree-item.selected { box-shadow: inset 2px 0 var(--accent); }
.tree-folder { width: 100%; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 7px 8px 4px; color: var(--muted); text-align: left; font: 10px ui-monospace, monospace; }
.tree-folder:hover { color: var(--text); background: var(--accent-soft); }
.tree-folder.selected { color: var(--text); background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent); }
.tree-item.dragging, .tree-folder.dragging { opacity: .45; }
.tree-item.drop-target, .tree-folder.drop-target, .file-tree.drop-target { outline: 1px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
.tree-folder-chevron { width: 10px; color: var(--accent); }
.tree-children { padding-left: 10px; }
.file-icon { color: var(--accent); font: 13px ui-monospace, monospace; }
.empty-state { padding: 28px 18px; text-align: center; color: var(--muted); font-size: 12px; }
.storage-note { display: flex; align-items: center; gap: 7px; padding: 10px 13px; color: var(--muted); font-size: 10px; border-top: 1px solid var(--border); }
.status-dot { width: 7px; height: 7px; background: #63d69b; border-radius: 50%; box-shadow: 0 0 0 3px rgba(99, 214, 155, .12); }
.editor-pane { background: var(--code); }
.editor-heading { background: var(--panel); }
#editor { flex: 1; width: 100%; min-height: 300px; resize: none; border: 0; outline: 0; padding: 20px 22px; background: var(--code); color: var(--text); font: 13px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.editor-footer { display: flex; justify-content: flex-end; gap: 14px; padding: 6px 14px; color: var(--muted); background: var(--panel); border-top: 1px solid var(--border); font: 10px ui-monospace, monospace; }
.preview-pane { background: var(--preview-canvas); }
.preview-heading { background: var(--panel); }
.preview-heading, .preview-actions { flex-wrap: wrap; }
.preview-actions { justify-content: flex-end; }
.preview-actions button { padding: 5px 8px; color: var(--muted); font-size: 10px; }
.preview-actions button.active { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.scroll-sync-control { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; color: var(--muted); font-size: 10px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.scroll-sync-control input { appearance: none; width: 25px; height: 14px; margin: 0; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-raised); cursor: pointer; transition: background .15s, border-color .15s; }
.scroll-sync-control input::before { content: ""; display: block; width: 10px; height: 10px; margin: 1px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.scroll-sync-control input:checked { background: var(--accent); border-color: var(--accent); }
.scroll-sync-control input:checked::before { background: var(--panel); transform: translateX(11px); }
.scroll-sync-control input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scroll-sync-control:has(input:checked) { color: var(--text); }
.preview-frame { min-height: 0; overflow: auto; flex: 1; padding: 23px; background: radial-gradient(circle at 20% 0%, var(--preview-canvas-tint), transparent 40%), var(--preview-canvas); }
.preview-frame.mobile { padding: 38px max(24px, calc((100% - 390px) / 2)); }
.preview-frame.mobile .guide-site-preview { width: 390px; max-width: 100%; margin: auto; }
.guide-site-preview { min-height: 100%; color: var(--text); }
.guide-page { max-width: 840px; margin: 0 auto; padding: 25px 27px 54px; background: var(--page); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }
.guide-page h1, .guide-page h2, .guide-page h3 { margin: 1.1em 0 .45em; line-height: 1.2; }
.guide-page h4, .guide-page h5, .guide-page h6 { margin: 1em 0 .4em; line-height: 1.25; }
.guide-page h1 { font-size: 28px; color: var(--accent); }
.guide-page h2 { font-size: 21px; }
.guide-page h3 { font-size: 1.17em; }
.guide-page p { line-height: 1.7; margin: .75em 0; }
.guide-page pre { max-width: 100%; white-space: pre-wrap; }
.guide-page hr { margin: 1.3em 0; border: 0; border-top: 1px solid var(--border); }
.guide-page dl { margin: 1em 0; }
.guide-page dt { color: var(--accent); font-weight: 700; }
.guide-page dd { margin: .25em 0 .7em 1.5em; }
.guide-page a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.guide-page ul, .guide-page ol { line-height: 1.7; padding-left: 1.6em; }
.guide-page blockquote { margin: 1em 0; padding: 10px 15px; border-left: 3px solid var(--guide-quote-accent, var(--preview-quote-default)); background: var(--preview-quote-bg); border-radius: 3px; color: var(--preview-quote-text); }
.guide-quote-title { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-weight: 650; color: var(--guide-quote-accent, var(--accent)); }
.guide-quote-title + .guide-quote-body > :first-child { margin-top: 0; }
.guide-quote-body > :last-child { margin-bottom: 0; }
.guide-quote-icon { display: inline-grid; place-items: center; min-width: 1.2em; height: 1.2em; border: 1px solid currentColor; border-radius: 50%; font-size: .8em; }
.guide-quote-icon-image { width: 1.2em; height: 1.2em; object-fit: contain; image-rendering: pixelated; }
.guide-page blockquote p { margin: .2em 0; }
.guide-alert strong { display: block; color: var(--accent); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.guide-page code { padding: 2px 5px; border-radius: 4px; background: var(--code); color: var(--preview-code-accent); font-size: .9em; }
.guide-code, .guide-mermaid pre { max-height: 360px; overflow: auto; margin: 1em 0; padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--code); color: var(--preview-code-text); font: 12px/1.6 ui-monospace, monospace; }
.guide-mermaid { border: 1px solid var(--preview-runtime-border); border-radius: 7px; background: var(--accent-soft); }
.guide-mermaid > span { display: block; padding: 7px 11px; color: var(--accent); border-bottom: 1px solid var(--preview-runtime-border); font: 10px ui-monospace, monospace; text-transform: uppercase; }
.guide-mermaid pre { margin: 0; border: 0; background: transparent; }
.guide-table-wrap { overflow: auto; }
.guide-page table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 13px; }
.guide-page th, .guide-page td { padding: 8px 10px; border: 1px solid var(--border); text-align: left; }
.guide-page th { background: var(--accent-soft); }
.guide-page img { max-width: 100%; height: auto; }
.asset-preview-page { display: grid; place-items: center; min-height: 220px; }
.asset-preview-media { display: block; max-width: 100%; max-height: 70vh; object-fit: contain; }
.asset-preview-code { width: 100%; min-height: 220px; white-space: pre-wrap; overflow: auto; }
.guide-media { display: block; max-width: 100%; margin: 14px 0; }
.guide-audio { width: min(100%, 420px); }
.guide-page mark { padding: 0 .18em; color: var(--preview-mark-text); background: var(--preview-mark); border-radius: 3px; }
.guide-layout { display: flex; gap: var(--guide-gap); max-width: 100%; margin: 12px 0; }
.guide-row { flex-direction: row; flex-wrap: wrap; }
.guide-column { flex-direction: column; }
.guide-item-placeholder-block { display: block; margin: 10px 0; }
.guide-item-placeholder { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; color: var(--text); }
.guide-item-placeholder[data-guide-tooltip-rich], .guide-runtime-placeholder[data-guide-tooltip-rich] { cursor: help; }
.guide-item-placeholder.inline { vertical-align: middle; }
.guide-item-placeholder-icon { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; color: var(--preview-gold); font-family: serif; }
.guide-item-placeholder-id { color: var(--preview-tooltip-code); text-decoration: underline dotted; text-underline-offset: 3px; }
.guide-item-placeholder-label { color: inherit; }
.guide-hidden-runtime-id { color: var(--preview-soft-text); font-style: italic; text-decoration-style: dotted; }
.guide-runtime-placeholder { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--preview-runtime-text); }
.guide-runtime-placeholder .runtime-icon { color: var(--preview-gold); font-size: 20px; }
.guide-runtime-placeholder .runtime-id { color: var(--preview-id); font: 12px ui-monospace, monospace; }
.guide-runtime-placeholder em { color: var(--preview-soft-text); font-size: 11px; }
.guide-runtime-frame { min-height: 96px; margin: 14px 0; border: 1px solid var(--preview-runtime-border); border-radius: 7px; overflow: hidden; background: var(--preview-runtime-bg); }
.guide-runtime-frame-title { padding: 7px 11px; border-bottom: 1px solid var(--preview-runtime-border); color: var(--preview-runtime-title); font: 11px ui-monospace, monospace; }
.guide-runtime-frame > .guide-runtime-placeholder { padding: 24px; }
.guide-embedded-square { float: left; clear: left; margin: 6px 14px 8px 0; }
.guide-embedded-square.guide-embedded-right, .guide-embedded-tight.guide-embedded-right, .guide-embedded-through.guide-embedded-right { float: right; clear: right; margin: 6px 0 8px 14px; }
.guide-embedded-tight, .guide-embedded-through { float: left; margin: 6px 14px 8px 0; }
.guide-embedded-center { display: block; width: max-content; max-width: 100%; margin: 12px auto; float: none; }
.guide-embedded-top-bottom { display: block; clear: both; margin: 12px 0; }
.guide-embedded-behind, .guide-embedded-front { position: relative; display: block; }
.guide-embedded-behind { z-index: 0; }
.guide-embedded-front { z-index: 1; }
.guide-scene-placeholder { position: relative; display: grid; place-items: center; min-width: 160px; min-height: 90px; margin: 15px 0; border: 1px solid var(--preview-runtime-border); border-radius: 7px; overflow: hidden; background: var(--preview-runtime-bg); color: var(--preview-runtime-title); }
.scene-grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(107, 177, 192, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 177, 192, .12) 1px, transparent 1px); background-size: 22px 22px; transform: perspective(170px) rotateX(53deg) scale(1.5); transform-origin: center bottom; }
.scene-label { position: relative; display: grid; gap: 4px; text-align: center; padding: 10px 15px; border: 1px solid var(--preview-runtime-border); border-radius: 6px; background: var(--page); font: 12px ui-monospace, monospace; }
.scene-label small { color: var(--preview-soft-text); font: 10px ui-sans-serif, sans-serif; }
.guide-details { margin: 13px 0; border: 1px solid var(--border); border-radius: 6px; background: var(--accent-soft); overflow: hidden; }
.guide-details > summary { padding: 10px 13px; cursor: pointer; color: var(--accent); font-weight: 650; }
.guide-details-body { max-height: var(--guide-details-height, none); overflow: auto; padding: 0 13px 12px; }
.guide-tabs { margin: 14px 0; border: 1px solid var(--border); border-left: 3px solid var(--guide-tabs-accent, var(--accent)); border-radius: 7px; overflow: hidden; }
.guide-tabs-heading { padding: 8px; background: var(--accent-soft); }
.guide-tabs-heading strong { display: flex; align-items: center; gap: 6px; color: var(--guide-tabs-accent, var(--accent)); }
.guide-tabs-icon { color: var(--guide-tabs-accent, var(--accent)); font-family: ui-monospace, monospace; }
.guide-tabs-buttons { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.guide-tabs-buttons button { padding: 5px 9px; color: var(--muted); font-size: 11px; }
.guide-tabs-buttons button.active { color: var(--text); border-color: var(--guide-tabs-accent, var(--accent)); background: var(--accent-soft); }
.guide-tab-panel { padding: 0 13px 12px; }
.guide-filetree { margin: 12px 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--code); font: 12px/1.55 ui-monospace, monospace; }
.guide-filetree-row { display: flex; align-items: baseline; gap: var(--tree-gap); min-height: calc(1.55em + var(--tree-gap)); white-space: pre; }
.guide-filetree-prefix { display: inline-block; min-width: calc(var(--tree-indent) + 2ch); color: var(--preview-soft-text); letter-spacing: .02em; }
.guide-filetree-vertical, .guide-filetree-branch, .guide-filetree-horizontal { color: var(--preview-tree-line); }
.guide-filetree-branch { font-weight: 700; }
.guide-filetree-label { min-width: 0; }
.guide-filetree-directory .guide-filetree-label { color: var(--preview-tree-folder); font-weight: 600; }
.guide-filetree-icon { min-width: 1.2em; color: var(--preview-gold); text-align: center; }
.guide-filetree-image { width: 1.2em; height: 1.2em; object-fit: contain; vertical-align: middle; image-rendering: pixelated; }
.guide-footnotes { max-width: 100%; margin: 20px 0 0; padding: 11px 15px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.guide-footnotes h4 { margin: 0 0 6px; color: var(--accent); }
.guide-footnotes ol { margin: 0; padding-left: 1.6em; }
.guide-footnote-ref { font-size: .72em; vertical-align: super; }
.guide-footnote-ref a { text-decoration: none; }
.guide-inline-image { display: inline-block; max-width: min(100%, 320px); vertical-align: middle; }
.guide-floating-image { position: relative; display: inline-block; max-width: 100%; margin: 8px 12px 8px 0; vertical-align: middle; overflow: hidden; border: 1px solid transparent; }
.guide-floating-image.wrap-square { float: left; clear: left; }
.guide-floating-image.wrap-square.align-right { float: right; clear: right; margin-right: 0; margin-left: 12px; }
.guide-floating-image.wrap-tight, .guide-floating-image.wrap-through { float: left; }
.guide-floating-image.align-center { display: block; margin-inline: auto; float: none; }
.guide-floating-image > img { position: absolute; left: calc(-1 * var(--crop-x)); top: calc(-1 * var(--crop-y)); width: auto; height: auto; max-width: none; transform: scale(var(--crop-scale-x), var(--crop-scale-y)); transform-origin: top left; image-rendering: auto; }
.guide-floating-image-full { width: max-content; height: auto; overflow: visible; }
.guide-floating-image-full > img { position: static; display: block; width: auto; height: auto; max-width: 100%; transform: none; }
.guide-floating-image.inline { vertical-align: middle; }
.guide-image-annotations { position: absolute; inset: 0; pointer-events: none; }
.guide-image-annotation { position: absolute; display: block; border: 2px solid; border-radius: 2px; pointer-events: auto; cursor: help; }
.guide-image-annotation-standalone { position: relative; display: inline-block; padding: 5px 8px; border-color: var(--preview-gold); }
.guide-image-placeholder { display: inline-block; padding: 9px 12px; border: 1px dashed var(--border); border-radius: 5px; color: var(--muted); font: 11px ui-monospace, monospace; }
.guide-chart, section.guide-function-graph { margin: 16px 0; border: 1px solid; border-radius: 7px; padding: 10px; overflow: hidden; }
.guide-chart h4, section.guide-function-graph h4 { margin: 0 0 5px; font-size: 13px; }
.guide-chart-svg { display: block; width: 100%; min-height: 130px; overflow: visible; }
.guide-chart-grid { stroke: var(--guide-chart-grid-color, var(--preview-chart-grid)); stroke-width: 1; }
.guide-chart-axis { stroke: var(--guide-chart-axis-color, var(--preview-chart-axis)); stroke-width: 1; }
.guide-chart-axis-label { fill: var(--guide-chart-label-color, var(--preview-chart-label)); font: 9px ui-monospace, monospace; }
.guide-chart-axis-title { fill: var(--preview-chart-value); font-size: 10px; }
.guide-chart-value-label { fill: var(--preview-chart-value); font: 9px ui-monospace, monospace; pointer-events: none; }
.guide-chart-corner-legend { fill: var(--preview-chart-value); font: 9px ui-monospace, monospace; }
.guide-chart-corner-legend-group { paint-order: stroke; stroke: var(--preview-chart-bg); stroke-width: 4px; stroke-linejoin: round; }
.guide-chart-shape { transition: opacity .12s ease, transform .12s ease; }
.guide-chart-shape:hover { filter: brightness(1.25); }
.guide-chart-legend-row { display: flex; flex-wrap: wrap; gap: 8px 13px; padding: 4px 2px 0; color: var(--preview-chart-legend); font-size: 10px; }
.guide-chart-legend { display: inline-flex; align-items: center; gap: 4px; }
.guide-chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.guide-chart-legend small { color: var(--preview-chart-label); }
.guide-chart-layout-legend-left, .guide-chart-layout-legend-right { display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) max-content; }
.guide-chart-layout-legend-left .guide-chart-svg, .guide-chart-layout-legend-right .guide-chart-svg { grid-row: 2; }
.guide-chart-layout-legend-left .guide-chart-legend-row, .guide-chart-layout-legend-right .guide-chart-legend-row { grid-row: 2; flex-direction: column; }
.guide-chart-layout-legend-left .guide-chart-legend-row { grid-column: 1; grid-row: 2; margin-right: 10px; }
.guide-chart-layout-legend-left .guide-chart-svg { grid-column: 2; }
.guide-chart-layout-legend-right .guide-chart-legend-row { grid-column: 2; margin-left: 10px; }
.guide-chart-layout-legend-right .guide-chart-svg { grid-column: 1; }
.guide-mermaid-diagram { margin: 14px 0; padding: 0 10px 10px; border: 1px solid var(--preview-diagram-border); border-radius: 7px; background: var(--preview-diagram-bg); overflow: auto; cursor: grab; }
.guide-mermaid-diagram.is-panning { cursor: grabbing; user-select: none; }
.guide-mermaid-diagram svg { display: block; width: 100%; height: auto; max-width: none; min-width: 0; min-height: 0; }
.guide-mermaid-label { padding: 7px 1px; color: var(--preview-runtime-title); font: 10px ui-monospace, monospace; }
.guide-mermaid-node-content { margin-top: 8px; border-top: 1px solid var(--preview-diagram-border); }
.guide-mermaid-node-content > summary { padding: 6px 1px; color: var(--preview-diagram-accent); cursor: pointer; font-size: 11px; }
:root[data-theme="light"] .status-dot { background: #278658; box-shadow: 0 0 0 3px rgba(39, 134, 88, .12); }
.guide-mermaid-node-content > div { padding: 0 1px 6px; font-size: 12px; }
.guide-mermaid-node { fill: var(--guide-mermaid-node-color, var(--preview-diagram-node)); stroke: var(--preview-diagram-stroke); stroke-width: 1.4; filter: drop-shadow(0 2px 2px rgba(0,0,0,.22)); }
.guide-mermaid-node-circle, .guide-mermaid-node-diamond, .guide-mermaid-node-hexagon { fill: var(--guide-mermaid-node-color, var(--preview-diagram-node)); stroke: var(--preview-diagram-stroke); stroke-width: 1.4; filter: drop-shadow(0 2px 2px rgba(0,0,0,.22)); }
.guide-mermaid-node-group { cursor: pointer; }
.guide-mermaid-node-group:hover .guide-mermaid-node { filter: brightness(1.18) drop-shadow(0 3px 4px rgba(0,0,0,.32)); }
.guide-mermaid-diagram text { fill: var(--preview-diagram-text); font: 10px ui-sans-serif, sans-serif; }
.guide-mermaid-connector { fill: none; stroke: var(--preview-diagram-connector); stroke-width: 1.5; }
.guide-runtime-panel { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 13px; border: 1px solid var(--border); border-radius: 5px; background: var(--accent-soft); color: var(--muted); }
.guide-runtime-panel strong { color: var(--accent); }
.guide-latex { display: inline-block; color: var(--preview-latex); font-family: "Times New Roman", serif; font-size: calc(1em * var(--latex-scale)); line-height: 1.25; vertical-align: middle; }
.guide-latex.display { display: block; width: max-content; max-width: 100%; margin: 15px auto; font-size: calc(1.2em * var(--latex-scale)); }
.latex-frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1; }
.latex-frac > span:first-child { padding: 0 3px 2px; border-bottom: 1px solid currentColor; }
.latex-frac > span:last-child { padding: 2px 3px 0; }
.latex-sqrt { display: inline-flex; align-items: flex-start; }
.latex-sqrt > span { border-top: 1px solid currentColor; padding: 0 2px; }
.latex-text, .latex-textrm, .latex-textbf, .latex-textit { font-family: inherit; font-size: .82em; }
.latex-textbf { font-weight: 700; }
.latex-textit { font-style: italic; }
.latex-accent { position: relative; display: inline-block; }
.latex-operator { font-style: normal; font-family: inherit; }
.latex-mathbb { font-family: "Cambria Math", "Times New Roman", serif; font-weight: 700; }
.latex-mathcal { font-family: "URW Chancery L", "Times New Roman", serif; font-style: italic; }
.latex-mathsf, .latex-mathtt { font-family: ui-monospace, monospace; font-size: .88em; }
.latex-overline::before, .latex-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -.08em; border-top: 1px solid currentColor; }
.latex-underline { text-decoration: underline; text-underline-offset: 2px; }
.latex-vec::after { content: "→"; position: absolute; right: -.12em; top: -.5em; font-size: .68em; }
.latex-overbrace::before, .latex-underbrace::after { content: "⏞"; position: absolute; left: 50%; transform: translateX(-50%); top: -.72em; font-size: .7em; }
.latex-underbrace::after { content: "⏟"; top: auto; bottom: -.72em; }
.latex-cancel { text-decoration: line-through; }
.latex-hat::before { content: "ˆ"; position: absolute; left: 50%; top: -.62em; transform: translateX(-50%); font-size: .7em; }
.latex-dot::before { content: "·"; position: absolute; left: 50%; top: -.7em; transform: translateX(-50%); font-size: .7em; }
.latex-ddot::before { content: "¨"; position: absolute; left: 50%; top: -.7em; transform: translateX(-50%); font-size: .7em; }
.latex-matrix, .latex-cases { display: inline-flex; flex-direction: column; vertical-align: middle; margin: 0 .18em; padding: 2px 5px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }
.latex-cases { border-right: 0; }
.latex-row { display: flex; min-height: 1.2em; }
.latex-cell { min-width: 1.6em; padding: 0 .25em; text-align: center; }
.latex-binomial { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; padding: 0 .18em; border-left: 1px solid currentColor; border-right: 1px solid currentColor; }
.latex-command { color: var(--preview-error); font-size: .75em; }
.guide-spoiler { position: relative; display: inline-block; padding: 0 3px; background: #000; border-radius: 2px; cursor: help; line-height: inherit; }
.guide-spoiler-content { position: relative; display: inline; color: inherit; }
.guide-spoiler-content::after { content: ""; position: absolute; z-index: 1; inset: -1px -3px; background: #000; border-radius: 2px; pointer-events: none; }
.guide-spoiler:hover .guide-spoiler-content::after, .guide-spoiler:focus .guide-spoiler-content::after, .guide-spoiler:focus-within .guide-spoiler-content::after { opacity: 0; }
.guide-tooltip-inline, .guide-link-placeholder { color: var(--preview-purple); text-decoration: underline dotted; text-underline-offset: 3px; }
.guide-tooltip-trigger { cursor: help; }
.guide-rich-tooltip { position: fixed; z-index: 1000; width: min(390px, calc(100vw - 16px)); max-height: min(460px, calc(100vh - 16px)); overflow: auto; padding: 11px 13px; color: var(--text); background: var(--panel); background: color-mix(in srgb, var(--panel) 96%, #000 4%); border: 1px solid var(--accent); border-radius: 7px; box-shadow: 0 12px 32px rgba(0, 0, 0, .42); font-size: 12px; line-height: 1.55; }
.guide-rich-tooltip[hidden] { display: none; }
.guide-rich-tooltip .guide-code { max-height: 220px; margin: 7px 0; }
.guide-rich-tooltip .guide-page { padding: 0; border: 0; box-shadow: none; background: transparent; }
.guide-rich-tooltip .guide-runtime-tooltip { display: grid; gap: 5px; }
.guide-rich-tooltip .guide-runtime-tooltip strong { color: var(--accent); }
.guide-rich-tooltip .guide-runtime-tooltip code { color: var(--preview-tooltip-code); font: 11px ui-monospace, monospace; }
.guide-sound-link { color: var(--preview-sound); text-decoration: underline dotted; text-underline-offset: 3px; }
.guide-keybind { padding: 2px 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; background: var(--code); color: var(--text); font-size: .82em; }
.guide-tag-card { display: block; margin: 13px 0; padding: 11px 13px; border: 1px dashed var(--border); border-radius: 5px; color: var(--muted); background: var(--accent-soft); font-size: 12px; }
.guide-inline-item { display: inline; color: var(--preview-purple); text-decoration: underline dotted; text-underline-offset: 3px; cursor: default; }
.guide-inline-item-image { display: inline-block; width: 1.3em; height: 1.3em; margin: 0 .12em; color: var(--preview-gold); vertical-align: -.22em; text-align: center; }
.guide-tag-card { display: block; margin: 13px 0; padding: 11px 13px; border: 1px dashed var(--border); border-radius: 5px; color: var(--muted); background: var(--accent-soft); font-size: 12px; }
.guide-tag-card.known { border-style: solid; color: var(--text); }
.guide-tag-name { display: inline-block; margin-right: 8px; color: var(--accent); font: 11px ui-monospace, monospace; }
.html-preview { width: 100%; height: 100%; min-height: 650px; border: 0; border-radius: 7px; background: white; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 4; max-width: 350px; padding: 10px 13px; color: var(--text); background: var(--panel-raised); border: 1px solid var(--accent); border-radius: 6px; box-shadow: var(--shadow); font-size: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) { .workspace { grid-template-columns: 210px minmax(320px, 1fr); overflow: auto; } .preview-pane { grid-column: 1 / -1; min-height: 620px; } }
@media (max-width: 680px) { .app-shell { height: auto; min-height: 100vh; overflow: visible; } .topbar { align-items: flex-start; flex-direction: column; } .topbar-actions { width: 100%; flex-basis: auto; justify-content: flex-start; } .workspace { height: auto; max-height: none; min-height: calc(100vh - 118px); display: flex; flex-direction: column; overflow: visible; } .sidebar { min-height: 260px; max-height: 360px; } .editor-pane { min-height: 470px; } .preview-pane { min-height: 620px; } }
@media (max-width: 680px) { .syntax-reference { width: calc(100vw - 14px); height: calc(100vh - 14px); } .reference-header { padding: 10px 12px; } .reference-body { grid-template-columns: 1fr; grid-template-rows: minmax(100px, 29%) minmax(0, 1fr); } .reference-results { border-right: 0; border-bottom: 1px solid var(--border); } .reference-content.guide-page { padding: 16px 18px 32px; } }


.guide-mermaid-diagram { scrollbar-width: thin; }
.guide-mermaid-mindmap, .guide-mermaid-flowchart { background: var(--preview-diagram-bg); border-color: var(--preview-diagram-border); }
.guide-mermaid-unavailable { display: grid; align-content: start; gap: 14px; color: var(--preview-soft-text); }
.guide-mermaid-unavailable-message { display: grid; place-items: center; min-height: 76px; padding: 12px; border: 1px dashed var(--preview-diagram-border); border-radius: 6px; color: var(--preview-soft-text); font: 12px ui-monospace, monospace; text-align: center; }
.guide-mermaid-mindmap svg, .guide-mermaid-flowchart svg { max-width: none; min-width: 0; min-height: 0; }
.guide-mermaid-node { fill: var(--preview-diagram-node); stroke: var(--preview-diagram-stroke); stroke-width: 1; filter: none; }
.guide-mermaid-node-accent { fill: var(--guide-mermaid-accent, var(--preview-diagram-accent)); }
.guide-mermaid-node-group:hover .guide-mermaid-node { fill: var(--preview-diagram-node-hover); stroke: var(--preview-diagram-accent); }
.guide-mermaid-node-content { box-sizing: border-box; width: 100%; height: 100%; color: var(--preview-diagram-text); font: 12px/1.35 ui-sans-serif, sans-serif; overflow: auto; }
.guide-mermaid-node-label { display: flex; align-items: center; gap: 5px; min-height: 24px; font-weight: 600; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.guide-mermaid-node-icon, .guide-flowchart-icon { color: var(--preview-diagram-accent); font-size: 11px; }
.guide-mermaid-node-rich, .guide-flowchart-rich { margin-top: 4px; min-width: 0; font-size: 10px; font-weight: 400; overflow-wrap: anywhere; }
.guide-mermaid-node-rich p, .guide-flowchart-rich p { margin: 0; }
.guide-flowchart-connector { fill: none; stroke: var(--preview-diagram-connector); stroke-width: 1.4; }
.guide-flowchart-shape { stroke-width: 1.5; }
.guide-flowchart-node-group { cursor: pointer; }
.guide-flowchart-node-group:hover .guide-flowchart-shape { filter: brightness(1.15); }
.guide-flowchart-label { box-sizing: border-box; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; font: 600 12px/1.25 ui-sans-serif, sans-serif; overflow: auto; overflow-wrap: anywhere; }
.guide-flowchart-label.has-rich-content { display: block; padding: 5px; text-align: left; }
.guide-flowchart-node-title { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
.guide-flowchart-label.has-rich-content .guide-flowchart-node-title { justify-content: flex-start; }
.guide-flowchart-rich { display: block; width: 100%; font-size: 10px; font-weight: 400; }
.guide-flowchart-rich .guide-runtime-frame, .guide-mermaid-node-rich .guide-runtime-frame { margin: 8px 0; }

.guide-chart-point, .guide-function-point { opacity: 1; visibility: visible; vector-effect: non-scaling-stroke; }
.guide-chart-line, .guide-function-path { opacity: 1; visibility: visible; }

.guide-latex-tooltip-source { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 ui-monospace, monospace; }
.guide-mermaid-diagram { overscroll-behavior: contain; }