:root { color-scheme: dark; --bg: #1e1e1e; --panel: #252526; --bar: #2d2d30; --line: #3c3c3c; --ink: #d4d4d4; --muted: #858585; --link: #569cd6; --active: #094771; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 3px; min-height: 100vh; }
.layout.info-open { grid-template-columns: 220px minmax(0, 1fr) 360px; }
.tree-pane { position: sticky; top: 0; height: 100vh; overflow: auto; background: var(--panel); border-right: 1px solid var(--line); }
.sidebar-head { position: sticky; top: 0; z-index: 2; min-height: 54px; padding: 7px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; background: var(--panel); }
.repo { color: #cccccc; font-size: 16px; font-weight: 700; text-decoration: none; border-bottom: 0; }
.repo:hover, .repo:focus { color: #ffffff; border-bottom: 0; }
.sidebar-link { color: #a8a8a8; font-size: 12px; text-decoration: none; border-bottom: 0; }
.sidebar-link:hover, .sidebar-link:focus { color: #ffffff; border-bottom: 0; }
nav { padding: 10px 8px 22px; }
.tree-file, summary { display: flex; align-items: center; min-height: 28px; padding: 4px 8px 4px calc(8px + var(--depth) * 16px); border-radius: 4px; color: #cccccc; font: 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-decoration: none; border-bottom: 0; cursor: pointer; }
.tree-file::before { content: ""; width: 16px; }
.tree-kind { width: 22px; flex: 0 0 22px; }
.tree-dir[open] > summary .folder-icon::before { content: "📂"; }
.folder-icon { font-size: 0; }
.folder-icon::before { content: "📁"; font-size: 13px; }
.tree-file:hover, summary:hover { background: #2a2d2e; color: #ffffff; }
.tree-file.active { background: var(--active); color: #ffffff; }
.tree-dir { margin: 1px 0; }
.tree-dir summary { list-style: none; }
.tree-dir summary::-webkit-details-marker { display: none; }
.content { min-width: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.info-pane { display: none; position: sticky; top: 0; height: 100vh; overflow: auto; background: #1f1f1f; border-left: 1px solid var(--line); }
.layout.info-open .info-pane { display: block; }
.info-head { height: 44px; padding: 6px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info-head h2 { margin: 0; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: #cccccc; }
.info-body { padding: 14px; }
.info-section { margin: 0 0 18px; }
.info-section h3 { margin: 0 0 7px; color: #cccccc; font-size: 14px; }
.info-section p { margin: 0; color: #a8a8a8; font-size: 14px; line-height: 1.6; }
.info-path { color: #dcdcaa; font-family: "Fira Code", "SFMono-Regular", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.symbol-view { display: none; }
.info-pane.symbol-mode .file-view { display: none; }
.info-pane.symbol-mode .symbol-view { display: block; }
.symbol-summary { padding: 16px 14px; border-bottom: 1px solid var(--line); }
.symbol-kind { margin: 0 0 12px; color: #cccccc; font-size: 13px; font-weight: 700; text-transform: lowercase; }
.symbol-name { margin: 0; color: #dcdcaa; font: 600 18px/1.35 "Fira Code", "SFMono-Regular", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.symbol-list { border-bottom: 1px solid var(--line); }
.symbol-list h3 { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); color: #cccccc; font-size: 13px; font-weight: 700; }
.symbol-list h3 span { color: var(--muted); font-weight: 600; }
.symbol-group { border-bottom: 1px solid rgba(60, 60, 60, 0.72); }
.symbol-group:last-child { border-bottom: 0; }
.symbol-group summary { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; color: #cccccc; cursor: pointer; list-style: none; }
.symbol-group summary::-webkit-details-marker { display: none; }
.symbol-group summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transform-origin: center; }
.symbol-group[open] summary::before { transform: translateY(-2px) rotate(45deg); }
.symbol-group summary:hover { background: #2a2d2e; color: #ffffff; }
.symbol-group-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.symbol-count { min-width: 22px; height: 22px; padding: 2px 7px; border-radius: 999px; background: #333333; color: #cccccc; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }
.symbol-item { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px; padding: 10px 14px; color: #cccccc; text-decoration: none; border-bottom: 1px solid rgba(60, 60, 60, 0.55); }
.symbol-item:last-child { border-bottom: 0; }
.symbol-item:hover, .symbol-item:focus { background: #2a2d2e; color: #ffffff; outline: 0; }
.symbol-line { color: #858585; text-align: right; font-family: "Fira Code", "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; }
.symbol-preview { display: block; color: #d6e8f8; overflow-wrap: anywhere; font-family: "Fira Code", "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.45; }
.symbol-empty { margin: 0; padding: 10px 14px 14px; color: var(--muted); }
header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 6px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
h1 { margin: 0; font: 600 15px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.fold-controls { display: inline-flex; align-items: center; gap: 4px; }
.info-button, .search-button, .fold-all-button, .close-info { appearance: none; border: 1px solid var(--line); background: #252526; color: #cccccc; border-radius: 4px; min-width: 28px; height: 28px; padding: 0 8px; font: 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; }
.fold-all-button:disabled { color: #5f5f5f; cursor: default; }
.search-button { display: inline-flex; align-items: center; gap: 6px; }
.search-button svg { width: 14px; height: 14px; }
.search-shortcut { color: var(--muted); font-size: 12px; }
.info-button:hover, .search-button:hover, .fold-all-button:hover:not(:disabled), .close-info:hover { background: #2a2d2e; color: #ffffff; }
.search-button:hover .search-shortcut, .search-button:focus .search-shortcut { color: #cccccc; }
.layout.info-open .info-button { background: var(--active); color: #ffffff; }
body.search-open { overflow: hidden; }
.search-overlay { position: fixed; inset: 0; z-index: 10; display: none; align-items: flex-start; justify-content: center; padding: 12vh 18px 24px; background: rgba(30, 30, 30, 0.72); backdrop-filter: blur(4px); }
body.search-open .search-overlay { display: flex; }
.search-dialog { width: min(720px, 100%); overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 18px 52px rgba(0, 0, 0, 0.45); }
.search-field { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bar); color: var(--muted); }
.search-field svg { width: 18px; height: 18px; }
.search-input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 15px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.search-input::placeholder { color: var(--muted); }
.search-key { min-width: 34px; height: 24px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; color: #cccccc; background: #252526; font: 12px/18px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; }
.search-results { max-height: min(52vh, 420px); overflow: auto; padding: 8px; }
.search-group { margin: 8px 8px 5px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.search-result { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 4px; color: #cccccc; text-decoration: none; }
.search-result:hover, .search-result:focus { background: #2a2d2e; color: #ffffff; outline: 0; }
.search-result.active { background: var(--active); color: #ffffff; outline: 0; }
.search-result-icon { width: 14px; height: 17px; border: 1.5px solid #858585; border-radius: 2px; position: relative; }
.search-result-icon::after { content: ""; position: absolute; top: -1.5px; right: -1.5px; width: 5px; height: 5px; border-left: 1.5px solid #858585; border-bottom: 1.5px solid #858585; background: var(--panel); }
.search-result:hover .search-result-icon, .search-result:hover .search-result-icon::after, .search-result.active .search-result-icon, .search-result.active .search-result-icon::after { border-color: #ffffff; }
.search-result-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-weight: 600; }
.search-result-path { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a8a8a8; font-size: 12px; }
.search-result.active .search-result-path { color: #d6e8f8; }
.search-result-tag { border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; color: #cccccc; background: #252526; font-size: 12px; white-space: nowrap; }
.search-result.active .search-result-tag { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.search-empty { padding: 26px 14px 30px; color: var(--muted); text-align: center; }
.status { color: var(--muted); font-size: 12px; white-space: nowrap; }
a { color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(86, 156, 214, 0.45); }
a:hover, a:focus { color: #9cdcfe; border-bottom-color: currentColor; }
pre { margin: 0; min-height: calc(100vh - 44px); overflow: auto; background: #1e1e1e; color: #d4d4d4; tab-size: 2; }
code { display: block; min-width: max-content; padding: 10px 0 24px; font-family: "Fira Code", "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; line-height: 22px; }
.code-line { display: grid; grid-template-columns: 78px 1fr; min-height: 22px; line-height: 22px; }
.code-line.hidden-by-fold { display: none; }
.code-line:hover { background: #2a2d2e; }
.code-line.target-line { background: rgba(9, 71, 113, 0.78); box-shadow: inset 3px 0 0 #4fc1ff; }
.line-no { user-select: none; padding: 0 8px 0 6px; color: #858585; text-align: right; border-right: 1px solid #333333; line-height: 22px; display: grid; grid-template-columns: 1fr 18px; align-items: center; gap: 4px; }
.fold-button { appearance: none; border: 0; background: transparent; cursor: pointer; width: 18px; height: 22px; padding: 0; display: grid; place-items: center; }
.fold-button::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid #858585; border-bottom: 1.5px solid #858585; transform: translateY(-2px) rotate(45deg); transform-origin: center; }
.fold-button[aria-expanded="false"]::before { transform: translateX(-1px) rotate(-45deg); }
.fold-button:hover::before { border-color: #cccccc; }
.fold-spacer { display: block; width: 18px; }
.line-code { padding: 0 16px; white-space: pre; line-height: 22px; }
.symbol-token { border-radius: 2px; cursor: pointer; }
.symbol-token:hover, .symbol-token:focus { background: rgba(86, 156, 214, 0.22); outline: 1px solid rgba(86, 156, 214, 0.36); }
.symbol-token.selected-symbol { background: #5a4a12; color: #fff4b8; outline: 1px solid #dcdcaa; }
.target-line .symbol-token.selected-symbol { background: #f0d66b; color: #1e1e1e; outline-color: #fff4b8; }
.tok-comment { color: #6a9955; }
.tok-string { color: #ce9178; }
.tok-keyword { color: #569cd6; }
.tok-number { color: #b5cea8; }
.tok-preproc { color: #569cd6; }
.tok-label { color: #dcdcaa; }
@media (max-width: 1080px) { .layout.info-open { grid-template-columns: 220px minmax(0, 1fr); } .layout.info-open .info-pane { position: fixed; top: 0; right: 0; width: min(360px, 92vw); z-index: 3; box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35); } }
@media (max-width: 860px) { .layout, .layout.info-open { grid-template-columns: 1fr; } .tree-pane, .layout.info-open .info-pane { display: none; } .content { border-left: 0; border-right: 0; } header { align-items: flex-start; flex-direction: column; } .actions { justify-content: flex-start; } .search-overlay { padding-top: 8vh; } }