@charset "UTF-8";

:root {
  color-scheme: dark;
  --bg: #0b0e1b;
  --surface: #13182b;
  --surface-soft: #171d33;
  --surface-high: #1d2540;
  --ink: #eef0fc;
  --muted: #98a2bd;
  --quiet: #76829f;
  --line: #ffffff12;
  --line-strong: #ffffff23;
  --violet: #b8a4ff;
  --cyan: #56cddd;
  --accent: #8975f1;
  --accent-wash: #8876f21c;
  --sidebar-bg: #0d1120ed;
  --topbar-bg: #0b0e1bdc;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --sidebar-width: 236px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; pointer-events: none; inset: 0; z-index: -1; background: radial-gradient(ellipse at 76% 5%, #4c3b7720, transparent 45%), radial-gradient(ellipse at 12% 83%, #24507910, transparent 38%); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
button { touch-action: manipulation; }
button svg, a svg { flex-shrink: 0; }
input, textarea, select { min-width: 0; }
::selection { background: #8d78ef55; color: #fff; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #7887af35; border-radius: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 20px; top: -100px; padding: 12px 20px; border-radius: 10px; background: var(--violet); color: #151226; }
.skip-link:focus { top: 12px; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 40; display: flex; flex-direction: column; padding: 29px 18px 18px; background: var(--sidebar-bg); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; backdrop-filter: blur(22px); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px; margin-bottom: 34px; font-size: 18px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
.brand svg, .brand .logo { width: 35px; height: 35px; color: var(--violet); }
.brand small { display: block; font-size: 10px; color: var(--quiet); font-weight: 400; letter-spacing: .08em; margin-top: 1px; }
.nav-group { display: grid; gap: 5px; margin-bottom: 25px; }
.nav-label { padding: 0 13px; margin: 0 0 8px; color: var(--quiet); font-size: 11px; font-weight: 500; letter-spacing: .08em; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 41px; padding: 9px 13px; color: var(--muted); border: 1px solid transparent; border-radius: 9px; transition: color .18s, background .18s; font-size: 13px; }
.nav-link svg { width: 17px; height: 17px; opacity: .8; }
.nav-link:hover { background: #ffffff05; color: var(--ink); }
.nav-link.active { background: linear-gradient(100deg, #8a73f424, #7262dc0b); border-color: #ac8fff18; color: #d1c5ff; }
.nav-link.active svg { opacity: 1; }
.nav-count { margin-left: auto; min-width: 21px; text-align: right; color: var(--quiet); font-size: 11px; font-variant-numeric: tabular-nums; }
.active .nav-count { color: #b8a4ffbd; }
.sidebar-footer { margin-top: auto; padding: 17px 12px 0; border-top: 1px solid var(--line); color: var(--quiet); font-size: 11px; }
.sidebar-footer p { margin: 3px 0; }
.sidebar-footer a:hover { color: var(--violet); }
.sidebar-footer .privacy { display: flex; align-items: center; gap: 6px; color: var(--muted); margin-bottom: 7px; }
.sidebar-footer svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.workspace { min-height: 100vh; margin-left: var(--sidebar-width); min-width: 0; }
.topbar { height: 79px; padding: 0 38px; display: flex; align-items: center; gap: 22px; position: sticky; top: 0; z-index: 30; background: var(--topbar-bg); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.breadcrumb { color: var(--muted); font-size: 12px; white-space: nowrap; }
.breadcrumb a:hover { color: var(--violet); }
.breadcrumb span { color: var(--quiet); margin: 0 8px; }
.search-box { display: flex; align-items: center; gap: 10px; margin-left: auto; width: min(380px, 44vw); background: #ffffff04; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 12px; min-width: 0; height: 39px; }
.search-box:focus-within { border-color: #b8a4ff80; background: #9d84ff08; }
.search-box svg { width: 16px; height: 16px; color: var(--quiet); flex-shrink: 0; }
.search-box input { background: none; border: 0; color: var(--ink); width: 100%; height: 100%; outline: none; padding: 0; font-size: 12px; }
.search-box input:focus-visible { outline: none; }
input::placeholder, textarea::placeholder { color: var(--quiet); }
.search-box kbd { font-family: inherit; font-size: 10px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; color: var(--quiet); }
.top-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.icon-button, .menu-toggle { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 9px; background: transparent; width: 37px; height: 37px; color: var(--muted); transition: background .15s, color .15s; }
.icon-button:hover, .menu-toggle:hover { background: var(--surface-high); color: var(--ink); }
.icon-button svg, .menu-toggle svg { width: 17px; height: 17px; }
.menu-toggle { display: none; }
.overlay { display: none; }
.page { max-width: 1500px; margin: 0 auto; padding: 36px 40px 70px; }
.page > :first-child { margin-top: 0; }

.hero { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(310px, 1fr); align-items: center; min-height: 360px; position: relative; isolation: isolate; gap: 20px; margin-bottom: 27px; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: -40px -40px 0; background-image: radial-gradient(#abb2f853 .7px, transparent .8px), radial-gradient(#a994e134 .7px, transparent .8px); background-size: 83px 67px, 127px 91px; background-position: 18px 9px, 69px 39px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 65%); pointer-events: none; }
.hero-copy { padding: 18px 0 28px; position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-size: 11px; margin: 0 0 17px; }
.eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px #b8a4ff88; }
.hero h1 { margin: 0 0 20px; font-size: clamp(34px, 3.3vw, 49px); font-weight: 600; line-height: 1.4; letter-spacing: -.035em; color: #f1efff; }
.hero h1 span { color: var(--violet); }
.hero-copy > p { max-width: 360px; margin: 0; line-height: 1.9; font-size: 13px; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.button { min-height: 40px; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.5; font-size: 12px; font-weight: 500; background: var(--surface); color: var(--ink); transition: border-color .15s, background .15s, transform .15s; }
.button:hover { background: var(--surface-high); border-color: #b8a4ff70; }
.button:active { transform: translateY(1px); }
.button.primary { background: #8873e9; border-color: #a690ff; color: #fff; box-shadow: 0 4px 23px #5c3ec527; }
.button.primary:hover { background: #9983f6; }
.button.secondary { background: #ffffff04; }
.button.small { min-height: 32px; padding: 6px 11px; font-size: 11px; }
.button svg { width: 15px; height: 15px; }
.button.danger { border-color: #ed849830; color: #f1a6b5; }
.universe { position: relative; width: 100%; min-width: 0; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.universe::before { content: ""; width: 230px; height: 230px; position: absolute; border-radius: 50%; background: radial-gradient(circle, #7955d529, #5b61ac06 60%, transparent 70%); filter: blur(8px); pointer-events: none; }
.universe svg { width: 100%; max-height: 390px; height: auto; overflow: visible; }
.orbit, .orbit-line { fill: none; stroke: #a397f52b; stroke-width: 1; }
.orbit:nth-of-type(2n) { stroke: #6dcbd324; stroke-dasharray: 3 7; }
.star-dot { fill: #b9c4e5; opacity: .65; }
.node-core { fill: var(--violet); }
.node-halo { fill: #ae91fa12; stroke: #b8a4ff35; stroke-width: 1; }
.map-label { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.universe text { font-family: var(--font); }
.universe a, .map-node { cursor: pointer; }
.universe a:hover .node-halo, .map-node:hover .node-halo { fill: #b8a4ff2c; stroke: #cfc1ffb0; }
.universe a:hover .map-label, .map-node:hover .map-label { fill: var(--ink); }
.stats-strip { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 21px 0; margin-bottom: 32px; }
.stat { min-width: 120px; padding: 0 30px; border-right: 1px solid var(--line); display: flex; gap: 10px; align-items: baseline; }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat strong { font-size: 22px; font-weight: 550; font-variant-numeric: tabular-nums; }
.stat small { font-size: 11px; color: var(--quiet); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.section-heading h2 { font-size: 16px; font-weight: 550; margin: 0; }
.section-heading p { color: var(--quiet); font-size: 11px; margin: 4px 0 0; }
.section-heading > a, .text-link { font-size: 12px; color: var(--muted); }
.section-heading > a:hover, .text-link:hover { color: var(--violet); }
.category-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 34px; }
.category-tab { min-height: 98px; position: relative; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: 1fr auto; gap: 5px 10px; padding: 20px 17px; background: linear-gradient(110deg, #b8a4ff09, #b8a4ff02); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: background .18s, border-color .18s; }
.category-tab::after { content: ""; position: absolute; top: 23px; left: 0; width: 3px; height: 27px; border-radius: 0 3px 3px 0; background: var(--tab-color, var(--violet)); opacity: .8; }
.category-tab:nth-child(2) { --tab-color: #65cbd9; }
.category-tab:nth-child(3) { --tab-color: #e0bd83; }
.category-tab:nth-child(4) { --tab-color: #c78dab; }
.category-tab:hover { border-color: #b8a4ff50; background: #b8a4ff0c; }
.category-symbol { grid-row: 1 / 3; color: var(--tab-color, var(--violet)); align-self: center; display: flex; align-items: center; justify-content: center; }
.category-symbol svg { width: 25px; height: 25px; stroke-width: 1.3; }
.category-name { font-size: 13px; font-weight: 500; align-self: end; }
.category-count { color: var(--quiet); font-size: 10px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 265px; gap: 32px; align-items: start; }
.note-list { display: grid; gap: 12px; }
.note-card { display: block; border: 1px solid var(--line); border-radius: 12px; background: #ffffff02; padding: 20px 21px; min-width: 0; transition: border-color .18s, background .18s; }
.note-card:hover { border-color: #b8a4ff40; background: #ffffff04; }
.note-meta, .note-bottom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10px; color: var(--quiet); }
.note-meta time { margin-left: auto; font-variant-numeric: tabular-nums; }
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; padding: 2px 7px; background: #a797f512; color: #b7a8e6; font-size: 10px; line-height: 1.5; }
.badge.draft { color: #d5b789; background: #d5b78910; }
.badge.archived { color: var(--quiet); background: #ffffff08; }
.note-card h3 { margin: 11px 0 7px; font-size: 15px; font-weight: 550; line-height: 1.6; overflow-wrap: anywhere; }
.note-card > p { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 0 0 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-bottom { justify-content: space-between; }
.note-bottom > div { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { color: var(--quiet); display: inline-flex; align-items: center; background: #ffffff05; border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; font-size: 10px; }
button.tag, a.tag { cursor: pointer; }
.tag.active, button.tag:hover, a.tag:hover { border-color: #b8a4ff70; color: var(--violet); background: #b8a4ff10; }
.tag-cloud { display: flex; gap: 8px; flex-wrap: wrap; }
.context-panel { min-width: 0; }
.context-panel > section, .context-panel > div { margin-bottom: 24px; }
.context-panel h3 { font-size: 13px; font-weight: 500; margin: 0 0 13px; }
.context-panel p { font-size: 12px; color: var(--muted); line-height: 1.85; }
.context-panel .note-card { padding: 20px; background: radial-gradient(circle at 100% 0, #8d72e713, transparent 80%), #ffffff02; }
.context-panel .note-card h3 { font-size: 14px; margin-top: 10px; }
.context-panel .note-card > p { -webkit-line-clamp: 4; }
.quick-links { display: grid; gap: 4px; }
.quick-links a { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12px; }
.quick-links a:hover { color: var(--violet); }
.context-note { border-left: 2px solid #a48ae144; padding: 0 0 0 13px; }
.context-note p { color: var(--quiet); font-size: 11px; }
.empty-state { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 35px 24px; border: 1px dashed var(--line-strong); border-radius: 14px; background: radial-gradient(ellipse at 50% 30%, #b8a4ff05, transparent 65%); }
.empty-state svg { width: 38px; height: 38px; color: #9e8ed878; margin-bottom: 16px; stroke-width: 1; }
.empty-state h2, .empty-state h3 { font-size: 17px; font-weight: 500; margin: 0 0 9px; }
.empty-state p { max-width: 420px; font-size: 12px; line-height: 1.9; color: var(--muted); margin: 0 0 20px; }
.page-title { margin-bottom: 27px; }
.page-title h1 { font-size: 28px; font-weight: 550; letter-spacing: -.025em; margin: 0 0 8px; }
.page-title p { color: var(--muted); font-size: 12px; margin: 0; max-width: 600px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 22px; }
.filter-bar label { font-size: 12px; color: var(--muted); }
.filter-bar select, .filter-bar input { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 7px; color: var(--ink); padding: 7px 10px; font-size: 12px; min-height: 35px; }
.filter-bar .result-count { margin-left: auto; color: var(--quiet); font-size: 11px; }
.list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.list-grid .note-card { height: 100%; }
.map-panel { border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(ellipse at 50% 50%, #34265030, transparent 65%), #ffffff01; overflow: hidden; position: relative; min-height: 450px; }
.map-panel svg { display: block; width: 100%; height: auto; min-height: 450px; max-height: 680px; }
.map-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.map-legend span { display: flex; gap: 7px; align-items: center; }
.map-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.map-node:focus-visible { outline: none; }
.map-node:focus-visible .node-halo { stroke: var(--cyan); stroke-width: 3; }
.timeline { max-width: 850px; }
.timeline-group { margin: 0 0 30px; }
.timeline-group > h2 { font-size: 12px; font-weight: 500; color: var(--violet); margin: 0 0 18px; }
.timeline-item { border-left: 1px solid var(--line-strong); padding: 0 0 24px 25px; margin-left: 4px; position: relative; }
.timeline-item::before { content: ""; position: absolute; left: -4px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: #9a86e7; box-shadow: 0 0 0 5px var(--bg); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item h3 { margin: 0 0 7px; font-size: 15px; font-weight: 500; }
.timeline-item p { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.timeline-item time { font-size: 10px; color: var(--quiet); }

.article-layout { display: grid; grid-template-columns: minmax(0, 800px) minmax(140px, 200px); gap: 44px; justify-content: center; align-items: start; }
.article-main { min-width: 0; }
.article-header { margin-bottom: 32px; border-bottom: 1px solid var(--line); padding-bottom: 25px; }
.article-header h1 { font-size: clamp(26px, 2.5vw, 36px); font-weight: 550; letter-spacing: -.025em; line-height: 1.5; margin: 16px 0; overflow-wrap: anywhere; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--quiet); font-size: 11px; }
.article-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.article-actions .button { background: transparent; }
.article-actions select { background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); padding: 7px 9px; border-radius: 8px; font-size: 11px; max-width: 160px; }
.markdown { font-size: 15px; line-height: 2; color: #cbd1e2; overflow-wrap: anywhere; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { color: var(--ink); font-weight: 550; line-height: 1.65; scroll-margin-top: 100px; }
.markdown h1 { font-size: 29px; margin: 35px 0 22px; }
.markdown h2 { font-size: 21px; margin: 37px 0 16px; }
.markdown h3 { font-size: 17px; margin: 30px 0 13px; }
.markdown h4 { font-size: 15px; margin: 25px 0 10px; }
.markdown > :first-child { margin-top: 0; }
.markdown p { margin: 0 0 18px; }
.markdown strong { color: #e4e7f4; font-weight: 600; }
.markdown a { color: #b6a5f8; text-decoration: underline; text-decoration-color: #b6a5f848; text-underline-offset: 4px; }
.markdown a:hover { color: #d4caff; text-decoration-color: currentColor; }
.markdown a[aria-disabled=true] { color: var(--quiet); text-decoration-style: dotted; cursor: help; }
.markdown ul, .markdown ol { padding-left: 25px; margin: 16px 0 24px; }
.markdown li { padding-left: 4px; margin-bottom: 8px; }
.markdown li::marker { color: var(--violet); }
.markdown li > p { margin-bottom: 7px; }
.markdown blockquote { margin: 22px 0; border-left: 3px solid #9c88e97d; background: #a68cf509; padding: 17px 22px; border-radius: 0 9px 9px 0; color: #bfc5db; }
.markdown blockquote > :last-child { margin-bottom: 0; }
.markdown pre { max-width: 100%; overflow: auto; background: #070b1680; border: 1px solid var(--line); border-radius: 10px; margin: 22px 0; padding: 18px 20px; line-height: 1.8; font-size: 12px; white-space: pre; }
.markdown code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .83em; background: #b8a4ff0f; border-radius: 4px; padding: 2px 5px; color: #bfc4e5; }
.markdown pre code { background: none; padding: 0; font-size: inherit; }
.markdown .table-wrap, .markdown .table-wrapper { max-width: 100%; overflow-x: auto; margin: 23px 0; border: 1px solid var(--line-strong); border-radius: 9px; }
.markdown table { border-collapse: collapse; width: 100%; font-size: 12px; line-height: 1.9; }
.markdown > table { display: block; overflow-x: auto; max-width: 100%; }
.markdown th { color: #d8dbee; font-weight: 500; background: #ffffff05; }
.markdown th, .markdown td { text-align: left; vertical-align: top; padding: 12px 15px; border-bottom: 1px solid var(--line); min-width: 100px; }
.markdown tr:last-child td { border-bottom: 0; }
.markdown tr:hover td { background: #ffffff02; }
.markdown hr { border: 0; border-top: 1px solid var(--line-strong); margin: 33px 0; }
.markdown img { max-width: 100%; height: auto; border-radius: 8px; }
.markdown .anchor-target { scroll-margin-top: 100px; }
.toc { position: sticky; top: 111px; border-left: 1px solid var(--line-strong); padding-left: 19px; max-height: calc(100vh - 140px); overflow: auto; }
.toc h2, .toc h3 { font-size: 11px; color: var(--quiet); font-weight: 500; margin: 0 0 12px; }
.toc a { display: block; font-size: 11px; color: var(--quiet); line-height: 1.8; padding: 6px 0; overflow-wrap: anywhere; }
.toc a:hover, .toc a.active { color: var(--violet); }
.toc .level-3 { padding-left: 12px; }
.progress-bar { position: fixed; top: 0; left: var(--sidebar-width); height: 2px; background: linear-gradient(90deg, #8e74f1, #72b4e9); z-index: 70; transition: width .1s linear; max-width: calc(100% - var(--sidebar-width)); }
body.large-text .markdown { font-size: 18px; }
body.large-text .markdown table { font-size: 14px; }

.draft-form, .settings-panel { max-width: 900px; padding: 27px; border: 1px solid var(--line-strong); border-radius: 13px; background: #ffffff02; margin-bottom: 26px; }
.draft-form h2, .settings-panel h2 { margin-top: 0; font-size: 17px; font-weight: 550; }
.draft-form p, .settings-panel p { color: var(--muted); font-size: 12px; }
.field { display: grid; gap: 8px; margin-bottom: 20px; min-width: 0; }
.field > label { color: var(--muted); font-size: 12px; }
.field input, .field textarea, .field select, .draft-form > input, .draft-form > textarea { color: var(--ink); background: #080c1880; border: 1px solid var(--line-strong); padding: 11px 13px; border-radius: 7px; width: 100%; }
.field textarea, .draft-form > textarea { resize: vertical; min-height: 220px; line-height: 1.9; }
.field input:focus, .field textarea:focus { border-color: #b8a4ff70; }
.form-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr); gap: 18px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-hint { font-size: 11px; color: var(--quiet); margin-top: 15px; }
.draft-list { display: grid; gap: 13px; max-width: 900px; }
.draft-list .note-card { position: relative; }
.draft-list .form-actions { margin-top: 13px; }
.toast { position: fixed; bottom: 28px; left: calc(50% + var(--sidebar-width) / 2); transform: translateX(-50%); z-index: 90; max-width: calc(100vw - 40px); padding: 12px 19px; background: #2a2944; border: 1px solid #b8a4ff55; color: #e9e3ff; font-size: 12px; border-radius: 10px; box-shadow: 0 7px 30px #0004; }
.toast:empty { display: none; }
.toast:not(.visible) { opacity: 0; pointer-events: none; }
.toast.visible { opacity: 1; transition: opacity .15s; }
.loading-state, .error-state { min-height: 60vh; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; padding: 30px; text-align: center; color: var(--muted); }
.loading-state::before { content: ""; height: 25px; width: 25px; border: 2px solid #b8a4ff25; border-top-color: var(--violet); border-radius: 50%; animation: spin .8s linear infinite; }
.error-state h1 { color: var(--ink); font-size: 23px; margin-bottom: 0; }
.error-state p { max-width: 430px; margin: 0; line-height: 1.9; }
.sync-note { color: var(--quiet); font-size: 10px; }
.privacy-badge { font-size: 10px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.privacy-badge svg { width: 12px; height: 12px; }
.reading-list { display: grid; gap: 10px; }
.reading-list a { display: block; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.reading-list a small { display: block; color: var(--quiet); margin-top: 4px; font-size: 10px; }
.reading-list a:hover { color: var(--violet); }
.bar-chart { display: grid; gap: 17px; margin: 20px 0; }
.bar-row { display: grid; grid-template-columns: 80px 1fr 25px; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); }
.bar-track { height: 7px; background: #ffffff06; border-radius: 9px; overflow: hidden; }
.bar-fill { height: 100%; min-width: 0; border-radius: 9px; background: linear-gradient(90deg, #7d6bd8, #8ab9da); }
.bar-row strong { font-weight: 400; font-variant-numeric: tabular-nums; text-align: right; }
.notice { border: 1px solid #baa4fa25; border-radius: 9px; padding: 14px 18px; background: #b8a4ff08; color: var(--muted); font-size: 12px; margin-bottom: 24px; line-height: 1.9; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Public introduction stays separate from the private reading workspace. */
.public-site { min-height: 100vh; background: radial-gradient(ellipse at 72% 19%, #49347b1b, transparent 45%); }
.public-nav { min-height: 87px; max-width: 1260px; margin: 0 auto; padding: 22px 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.public-brand { display: inline-flex; gap: 12px; align-items: center; font-size: 17px; font-weight: 600; letter-spacing: .025em; }
.public-brand svg { color: var(--violet); width: 32px; height: 32px; }
.public-nav > div, .public-nav > nav { display: flex; align-items: center; gap: 25px; }
.public-nav nav > a:not(.button) { font-size: 12px; color: var(--muted); }
.public-nav nav > a:not(.button):hover { color: var(--ink); }
.public-nav .button { min-height: 35px; font-size: 11px; padding: 7px 13px; }
.public-hero { max-width: 1260px; min-height: 650px; padding: 74px 48px 80px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; position: relative; gap: 22px; isolation: isolate; }
.public-hero::before { content: ""; position: absolute; z-index: -1; inset: 15px 0 0 10%; background-image: radial-gradient(#c6baff5c .8px, transparent .9px), radial-gradient(#98d3df40 .6px, transparent .7px); background-size: 108px 79px, 153px 117px; background-position: 0 0, 55px 31px; -webkit-mask-image: radial-gradient(ellipse at 65% 48%, #000 3%, transparent 67%); mask-image: radial-gradient(ellipse at 65% 48%, #000 3%, transparent 67%); pointer-events: none; }
.public-hero .eyebrow { font-size: 11px; margin-bottom: 24px; }
.public-hero h1 { font-size: clamp(43px, 4.6vw, 66px); line-height: 1.35; letter-spacing: -.045em; font-weight: 550; margin: 0 0 27px; color: #f0effb; }
.public-hero h1 em { font-style: normal; color: #b7a1fa; }
.public-hero p { max-width: 430px; color: var(--muted); font-size: 14px; line-height: 2.05; margin: 0 0 26px; }
.public-hero .hero-actions { margin-top: 30px; gap: 12px; }
.public-hero .hero-actions .button { min-height: 43px; padding: 10px 19px; }
.public-orbit { min-width: 0; min-height: 420px; display: flex; align-items: center; justify-content: center; position: relative; }
.public-orbit::before { content: ""; width: 330px; height: 330px; position: absolute; background: radial-gradient(circle, #6550a42b, #4d47800a 50%, transparent 70%); pointer-events: none; }
.public-orbit svg { width: 100%; height: auto; overflow: visible; max-height: 520px; }
.public-orbit text { font-family: var(--font); }
.public-section { max-width: 1164px; margin: 0 auto; padding: 65px 0; border-top: 1px solid var(--line); }
.public-section > h2 { font-size: 26px; line-height: 1.5; letter-spacing: -.02em; font-weight: 550; margin: 0 0 15px; }
.public-section > p { max-width: 720px; font-size: 14px; line-height: 2; color: var(--muted); margin: 0 0 30px; }
.public-section .section-heading { align-items: end; margin-bottom: 26px; }
.public-section .section-heading h2 { font-size: 25px; letter-spacing: -.02em; }
.public-section .section-heading p { max-width: 520px; font-size: 12px; line-height: 1.9; margin-top: 10px; }
.public-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 23px; }
.public-project-card { min-height: 245px; border: 1px solid var(--line-strong); border-radius: 15px; padding: 29px; display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: hidden; background: linear-gradient(140deg, #8e71d40d, #ffffff01 65%); }
.public-project-card:nth-child(2) { background: linear-gradient(140deg, #4892ad0d, #ffffff01 65%); }
.public-project-card:hover { border-color: #a18ad34f; }
.public-project-card > svg { color: var(--violet); width: 30px; height: 30px; margin-bottom: 20px; }
.public-project-card:nth-child(2) > svg { color: var(--cyan); }
.public-project-card h3 { font-size: 22px; font-weight: 550; margin: 0 0 12px; }
.public-project-card p { font-size: 12px; color: var(--muted); line-height: 2; max-width: 360px; margin: 0 0 24px; }
.public-project-card .button, .public-project-card > a { margin-top: auto; }
.public-project-card > a:not(.button) { font-size: 12px; color: var(--violet); border-bottom: 1px solid #b8a4ff40; padding-bottom: 2px; }
.public-project-card .badge { margin-bottom: 16px; }
.public-note { padding: 24px 27px; border-left: 2px solid #ad91f265; background: #9774da07; color: var(--muted); font-size: 13px; line-height: 2; max-width: 850px; border-radius: 0 10px 10px 0; }
.public-note p { margin: 0; }
.public-note strong { color: var(--ink); font-weight: 500; }
.public-footer { max-width: 1164px; margin: 0 auto; padding: 27px 0 35px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--quiet); font-size: 11px; }
.public-footer p { margin: 0; }
.public-footer a { color: var(--muted); }
.public-footer a:hover { color: var(--violet); }
.public-footer > div { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 1280px) {
  .public-section, .public-footer { margin-left: 48px; margin-right: 48px; }
  .public-hero { min-height: 590px; padding-top: 55px; padding-bottom: 55px; }
}
@media (max-width: 900px) {
  .public-nav { padding: 20px 30px; }
  .public-hero { padding: 50px 30px; min-height: 530px; gap: 0; }
  .public-hero h1 { font-size: 43px; }
  .public-hero p { font-size: 12px; }
  .public-orbit { min-height: 330px; }
  .public-section, .public-footer { margin-left: 30px; margin-right: 30px; }
  .public-section { padding-top: 45px; padding-bottom: 45px; }
  .public-project-card { padding: 25px; }
}
@media (max-width: 600px) {
  .public-nav { min-height: 72px; padding: 17px 21px; gap: 10px; }
  .public-brand { font-size: 15px; gap: 8px; }
  .public-brand svg { width: 28px; height: 28px; }
  .public-nav > div, .public-nav > nav { gap: 10px; }
  .public-nav nav > a:not(.button) { display: none; }
  .public-nav .button { font-size: 10px; padding: 7px 10px; min-height: 33px; }
  .public-hero { grid-template-columns: 1fr; padding: 49px 24px 18px; min-height: 0; }
  .public-hero h1 { font-size: 43px; line-height: 1.38; letter-spacing: -.045em; margin-bottom: 21px; }
  .public-hero .eyebrow { margin-bottom: 20px; font-size: 10px; }
  .public-hero p { font-size: 12px; line-height: 2; max-width: 340px; }
  .public-hero .hero-actions { margin-top: 25px; gap: 10px; }
  .public-hero .hero-actions .button { min-height: 40px; padding: 9px 15px; font-size: 11px; }
  .public-orbit { min-height: 0; height: 330px; margin-top: 8px; }
  .public-orbit svg { height: 340px; width: 100%; max-width: 390px; }
  .public-section, .public-footer { margin-left: 24px; margin-right: 24px; }
  .public-section { padding-top: 35px; padding-bottom: 35px; }
  .public-section > h2, .public-section .section-heading h2 { font-size: 23px; }
  .public-section > p { font-size: 12px; }
  .public-projects { grid-template-columns: 1fr; gap: 16px; }
  .public-project-card { padding: 25px; min-height: 225px; }
  .public-project-card h3 { font-size: 21px; }
  .public-note { padding: 20px; font-size: 12px; }
  .public-footer { display: block; padding-bottom: 30px; font-size: 10px; }
  .public-footer > div { margin-top: 13px; gap: 16px; }
}

:root[data-theme="light"] { color-scheme: light; --bg: #f3f5fb; --surface: #fff; --surface-soft: #eaf0fa; --surface-high: #e9e9f6; --ink: #30334e; --muted: #65708a; --quiet: #7c85a0; --line: #38476512; --line-strong: #38476522; --violet: #7454b6; --cyan: #207e96; --accent: #7259c2; --accent-wash: #8876f212; --sidebar-bg: #f9faffed; --topbar-bg: #f3f5fbdc; }
:root[data-theme="light"] body::before { background: radial-gradient(ellipse at 75% 6%, #b3a6e124, transparent 50%); }
:root[data-theme="light"] .hero h1 { color: #30334e; }
:root[data-theme="light"] .nav-link.active { color: #7252b4; background: #8a73f414; }
:root[data-theme="light"] .search-box, :root[data-theme="light"] .note-card { background: #ffffff90; }
:root[data-theme="light"] .markdown { color: #525d76; }
:root[data-theme="light"] .markdown strong, :root[data-theme="light"] .markdown th { color: #30334e; }
:root[data-theme="light"] .markdown a { color: #7052a9; }
:root[data-theme="light"] .markdown code { color: #69548e; }
:root[data-theme="light"] .markdown blockquote { color: #65708a; }
:root[data-theme="light"] .markdown pre, :root[data-theme="light"] .field input, :root[data-theme="light"] .field textarea, :root[data-theme="light"] .field select { background: #e9edf880; }
:root[data-theme="light"] .badge { color: #7c5eb2; }
:root[data-theme="light"] .badge.draft { color: #9a7239; }
:root[data-theme="light"] .orbit, :root[data-theme="light"] .orbit-line { stroke: #786aab40; }
:root[data-theme="light"] .node-halo { fill: #9c81d412; stroke: #8b6abd50; }
:root[data-theme="light"] .button.primary { color: #fff; background: #8065cd; }

@media (min-width: 1600px) {
  :root { --sidebar-width: 250px; }
  .page { padding-left: 55px; padding-right: 55px; }
  .hero { grid-template-columns: 1.05fr 1fr; min-height: 410px; }
  .hero h1 { font-size: 54px; }
  .universe svg { max-height: 420px; }
}
@media (max-width: 1200px) {
  :root { --sidebar-width: 216px; }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .brand { font-size: 16px; gap: 8px; }
  .topbar { padding: 0 25px; gap: 14px; }
  .page { padding: 29px 27px 55px; }
  .hero { grid-template-columns: minmax(270px, 1fr) minmax(240px, 1fr); gap: 0; min-height: 320px; }
  .hero h1 { font-size: 37px; }
  .universe { min-height: 290px; }
  .content-grid { grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; }
  .category-tabs { gap: 10px; }
  .category-tab { padding: 17px 12px; grid-template-columns: 27px 1fr; gap: 5px 8px; }
  .category-symbol svg { width: 22px; height: 22px; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 145px; gap: 28px; }
  .stat { padding: 0 20px; }
}
@media (max-width: 1000px) {
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .context-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
  .context-panel > section, .context-panel > div { margin-bottom: 0; }
  .hero { grid-template-columns: 1fr 1fr; min-height: 295px; }
  .hero h1 { font-size: 31px; }
  .hero-copy > p { font-size: 12px; }
  .hero-actions { gap: 7px; }
  .hero-actions .button { padding: 8px 12px; }
  .universe { min-height: 250px; }
  .category-tabs { grid-template-columns: repeat(2, 1fr); }
  .category-tab { min-height: 85px; padding: 16px 20px; }
  .article-layout { display: block; }
  .toc { display: none; }
  .stat { min-width: 0; padding: 0 15px; }
  .stat strong { font-size: 20px; }
  .breadcrumb { display: none; }
}
@media (max-width: 780px) {
  :root { --sidebar-width: 250px; }
  .sidebar { visibility: hidden; transform: translateX(-100%); transition: transform .2s ease; padding: 25px 18px; }
  .workspace { margin-left: 0; }
  .menu-toggle { display: inline-flex; }
  .topbar { height: 68px; padding: 0 22px; gap: 13px; }
  .search-box { margin-left: 0; width: auto; flex: 1; }
  .search-box input { font-size: 13px; }
  .top-actions { margin-left: auto; }
  .page { padding: 25px 25px 55px; }
  .hero { grid-template-columns: 1fr 1fr; min-height: 340px; gap: 14px; }
  .hero h1 { font-size: 35px; }
  .universe { min-height: 300px; }
  .category-tabs { grid-template-columns: repeat(4, 1fr); }
  .category-tab { padding: 17px 13px; grid-template-columns: 1fr; gap: 7px; }
  .category-symbol { grid-row: auto; justify-content: flex-start; margin-bottom: 3px; }
  .category-count { font-size: 10px; }
  .category-name { font-size: 12px; }
  .overlay { position: fixed; z-index: 35; inset: 0; background: #050714a3; backdrop-filter: blur(5px); border: 0; }
  body.menu-open { overflow: hidden; }
  body.menu-open .sidebar { visibility: visible; transform: translateX(0); }
  body.menu-open .overlay { display: block; }
  .progress-bar { left: 0; max-width: 100%; }
  .toast { left: 50%; }
  .map-panel, .map-panel svg { min-height: 370px; }
}
@media (max-width: 560px) {
  .topbar { height: 65px; padding: 0 16px; gap: 10px; }
  .top-actions { gap: 6px; }
  .top-actions .privacy-badge { display: none; }
  .icon-button, .menu-toggle { width: 35px; height: 35px; flex-shrink: 0; }
  .search-box { padding: 0 10px; gap: 7px; height: 36px; }
  .search-box input { font-size: 11px; }
  .search-box kbd { display: none; }
  .page { padding: 20px 18px 45px; }
  .hero { grid-template-columns: 1fr; min-height: 0; gap: 0; margin-bottom: 15px; }
  .hero-copy { padding: 17px 3px 0; }
  .hero h1 { font-size: 36px; line-height: 1.4; margin-bottom: 16px; }
  .hero-copy > p { font-size: 12px; max-width: 320px; }
  .eyebrow { font-size: 10px; margin-bottom: 13px; }
  .hero-actions { margin-top: 21px; }
  .hero-actions .button { padding: 9px 15px; }
  .universe { min-height: 0; height: 255px; margin-top: 2px; }
  .universe svg { height: 275px; max-width: 370px; }
  .hero::before { inset: 0 -18px; }
  .stats-strip { margin-bottom: 28px; padding: 16px 0; justify-content: space-between; flex-wrap: nowrap; }
  .stat { padding: 0 11px; display: grid; gap: 2px; }
  .stat:first-child { padding-left: 3px; }
  .stat:last-child { padding-right: 3px; }
  .stat strong { font-size: 22px; }
  .stat small { font-size: 9px; white-space: nowrap; }
  .category-tabs { grid-template-columns: repeat(2, 1fr); gap: 11px; margin-bottom: 28px; }
  .category-tab { min-height: 88px; grid-template-columns: 31px 1fr; grid-template-rows: 1fr auto; gap: 4px 11px; padding: 15px 17px; }
  .category-symbol { grid-row: 1 / 3; margin: 0; }
  .category-name { font-size: 13px; }
  .section-heading { margin-bottom: 15px; }
  .section-heading h2 { font-size: 15px; }
  .section-heading > a { font-size: 11px; }
  .content-grid { gap: 27px; }
  .context-panel { grid-template-columns: 1fr; gap: 23px; }
  .note-card { padding: 18px; }
  .note-card h3 { font-size: 14px; }
  .note-card > p { font-size: 11px; }
  .list-grid { grid-template-columns: 1fr; gap: 12px; }
  .page-title h1 { font-size: 26px; }
  .page-title { margin-top: 9px; }
  .page-title p { font-size: 12px; }
  .filter-bar { gap: 8px; }
  .filter-bar select { max-width: 150px; font-size: 11px; }
  .filter-bar .result-count { width: 100%; margin-left: 0; padding-top: 3px; }
  .empty-state { min-height: 260px; padding: 30px 20px; }
  .empty-state p { font-size: 11px; }
  .article-header h1 { font-size: 27px; line-height: 1.55; }
  .article-header { margin-bottom: 26px; padding-bottom: 22px; }
  .article-meta { gap: 7px; font-size: 10px; }
  .article-actions { gap: 7px; }
  .article-actions .button { font-size: 10px; padding: 7px 10px; }
  .article-actions select { font-size: 10px; }
  .markdown { font-size: 14px; line-height: 2; }
  .markdown h1 { font-size: 25px; }
  .markdown h2 { font-size: 19px; margin-top: 30px; }
  .markdown h3 { font-size: 16px; }
  .markdown blockquote { padding: 14px 17px; margin: 20px 0; }
  .markdown ul, .markdown ol { padding-left: 21px; }
  .markdown th, .markdown td { padding: 10px 12px; min-width: 110px; }
  .markdown pre { font-size: 11px; padding: 15px; }
  body.large-text .markdown { font-size: 17px; }
  .draft-form, .settings-panel { padding: 20px 17px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-actions .button { flex: 1; }
  .field textarea { min-height: 230px; }
  .map-panel { overflow-x: auto; }
  .map-panel svg { min-width: 510px; min-height: 430px; }
  .map-legend { padding: 14px; font-size: 10px; }
  .notice { padding: 13px 15px; font-size: 11px; }
  .toast { width: max-content; text-align: center; bottom: 18px; }
  .bar-row { grid-template-columns: 65px 1fr 20px; gap: 9px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The concrete page markup uses typographic symbols alongside its orbital SVG. */
.brand-mark { display: inline-flex; width: 35px; height: 35px; align-items: center; justify-content: center; flex-shrink: 0; color: var(--violet); font-size: 35px; line-height: 1; text-shadow: 0 0 20px #a38bff35; }
.nav-icon { display: inline-flex; width: 17px; justify-content: center; font-size: 17px; line-height: 1; flex-shrink: 0; }
.sidebar-footer > span, .sidebar-footer > a, .sidebar-footer > small { display: block; }
.sidebar-footer > span { margin-bottom: 8px; }
.sidebar-footer > a { margin-bottom: 10px; color: var(--muted); }
.sidebar-footer > small { font-size: 10px; line-height: 1.85; color: var(--quiet); }
.privacy-label { color: var(--muted); font-size: 10px; }
.sidebar-footer .privacy-label { color: #a7a4c3; }
.core-label, .core-count { fill: #27213e; font-weight: 650; }
.core-label { font-size: 13px; }
.core-count { font-size: 11px; }
.category-tab { grid-template-columns: 31px minmax(0, 1fr) 12px; grid-template-rows: 1fr auto; gap: 5px 10px; }
.category-symbol { grid-column: 1; grid-row: 1 / 3; font-size: 26px; line-height: 1; margin: 0; }
.category-name { grid-column: 2; grid-row: 1; }
.category-count { grid-column: 2; grid-row: 2; }
.tab-arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--quiet); font-size: 15px; }
.category-tab:hover .tab-arrow { color: var(--tab-color, var(--violet)); }
.category-mark { color: #a59bd0; font-size: 10px; }
.category-mark.methods { color: #d4b588; }
.category-mark.knowledge, .category-mark.library { color: #7bb7c6; }
.category-mark.viewpoints { color: #c595b1; }
.saved-marker { color: #d3b87b; }
.note-bottom { justify-content: flex-start; gap: 6px; }
.read-arrow { margin-left: auto; font-size: 15px; color: var(--quiet); }
.note-card:hover .read-arrow { color: var(--violet); }
.context-box { padding: 20px 0; border-top: 1px solid var(--line); }
.context-box:first-child { padding: 23px 21px; border: 1px solid #ab8ff029; background: radial-gradient(ellipse at 100% 0, #9372dc18, transparent 80%), #a68aff04; border-radius: 13px; }
.context-symbol { display: block; color: var(--violet); font-size: 30px; line-height: 1; margin-bottom: 19px; }
.context-box h3 { margin-bottom: 9px; }
.context-box p { margin: 0 0 17px; font-size: 11px; line-height: 1.9; }
.context-box.quiet { padding-top: 0; border: 0; }
.context-box.quiet h3 { color: var(--muted); }
.context-box.quiet p { color: var(--quiet); margin-bottom: 9px; }
.tag.selected { border-color: #b8a4ff70; color: var(--violet); background: #b8a4ff10; }
.empty-symbol { font-size: 46px; line-height: 1.1; color: #ac96e494; margin-bottom: 18px; }
.article-back { margin-bottom: 22px; color: var(--quiet); font-size: 12px; }
.article-back a:hover { color: var(--violet); }
.article-date { display: flex; flex-wrap: wrap; gap: 16px; color: var(--quiet); font-size: 11px; margin: 0; }
.related { margin-top: 50px; border-top: 1px solid var(--line); padding-top: 29px; }
.toc .nav-label { padding-left: 0; }
.toc a.sub { padding-left: 12px; }
.toc > span { color: var(--quiet); font-size: 11px; }
.markdown .table-scroll { max-width: 100%; overflow-x: auto; margin: 23px 0; border: 1px solid var(--line-strong); border-radius: 9px; }
.markdown .table-scroll table { margin: 0; }
.markdown .unavailable-link { color: var(--quiet); text-decoration-style: dotted; cursor: help; }
.timeline-item { display: block; min-height: 74px; padding-right: 28px; }
.timeline-item:hover h3 { color: var(--violet); }
.timeline-item h3 { margin-top: 5px; margin-bottom: 0; }
.timeline-item > span:last-child { position: absolute; right: 4px; top: 22px; color: var(--quiet); }
.timeline-dot { display: none; }
.learning-section { margin: 28px 0 35px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.learning-section .section-heading > span { color: var(--quiet); font-size: 11px; }
.muted { color: var(--quiet); font-size: 12px; }
.page-title > .button { margin-top: 18px; }
.draft-form label.field { font-size: 12px; color: var(--muted); }
.public-nav .brand, .public-footer .brand { margin: 0; padding: 0; }
.public-nav > div > a:not(.button) { color: var(--muted); font-size: 12px; }
.public-nav > div > a:not(.button):hover { color: var(--ink); }
.public-project-card:has(.project-art) { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: center; gap: 26px; min-height: 240px; }
.project-art { position: relative; width: 145px; height: 145px; display: flex; align-items: center; justify-content: center; border-radius: 27px; background: linear-gradient(145deg, #def5e9, #a1cdbb); box-shadow: inset 0 1px 0 #ffffffbb, 0 17px 34px #0003; transform: rotate(-6deg); }
.project-art::before { content: ""; position: absolute; inset: 17px; border: 1px solid #54877630; border-radius: 18px; }
.project-art > span { color: #245f51; font-size: 62px; font-weight: 300; font-family: "Songti SC", "STSong", serif; line-height: 1; transform: rotate(6deg); }
.project-art > i { position: absolute; width: 35px; height: 35px; bottom: -9px; right: -10px; border: 1px solid #a6d8c6; border-radius: 50%; background: #153c35; color: #bce6d3; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 18px; box-shadow: 0 4px 15px #0004; transform: rotate(6deg); }
.public-project-card:has(.project-art) h3 { font-size: 25px; margin-bottom: 10px; }
.public-project-card:has(.project-art) p { margin-bottom: 17px; }
.public-project-card:has(.project-art) .badge { margin-bottom: 13px; }
.public-note > .empty-symbol { display: block; margin-bottom: 9px; font-size: 31px; }
.public-note > h3 { color: var(--ink); font-size: 17px; font-weight: 500; margin: 0 0 8px; }
.public-footer .brand { font-size: 13px; font-weight: 500; }
:root[data-theme="light"] .public-hero h1 { color: var(--ink); }
:root[data-theme="light"] .core-label, :root[data-theme="light"] .core-count { fill: #f7f3ff; }
@media (max-width: 1200px) {
  .category-tab { grid-template-columns: 25px minmax(0, 1fr) 10px; column-gap: 7px; }
  .category-symbol { font-size: 23px; }
  .public-project-card:has(.project-art) { grid-template-columns: 105px minmax(0, 1fr); gap: 25px; }
  .project-art { width: 105px; height: 115px; border-radius: 23px; }
  .project-art > span { font-size: 50px; }
}
@media (max-width: 780px) and (min-width: 561px) {
  .category-tab { grid-template-columns: minmax(0, 1fr) 10px; grid-template-rows: auto auto auto; }
  .category-symbol { grid-column: 1; grid-row: 1; justify-content: flex-start; margin-bottom: 8px; }
  .category-name { grid-column: 1; grid-row: 2; }
  .category-count { grid-column: 1; grid-row: 3; }
  .tab-arrow { grid-column: 2; grid-row: 1 / 4; }
}
@media (max-width: 560px) {
  .category-tab { grid-template-columns: 26px minmax(0, 1fr) 11px; grid-template-rows: 1fr auto; padding: 16px 14px; gap: 4px 8px; }
  .category-symbol { grid-column: 1; grid-row: 1 / 3; justify-content: center; margin: 0; }
  .category-name { grid-column: 2; grid-row: 1; }
  .category-count { grid-column: 2; grid-row: 2; }
  .tab-arrow { grid-column: 3; grid-row: 1 / 3; }
  .context-box:first-child { padding: 23px; }
  .context-box { padding-top: 20px; }
  .markdown .table-scroll { margin-top: 20px; margin-bottom: 20px; }
  .article-back { margin-bottom: 17px; }
  .article-date { font-size: 10px; gap: 10px; }
  .related { margin-top: 35px; }
  .public-nav > div > a:not(.button) { display: none; }
  .public-brand .brand-mark { width: 27px; height: 27px; font-size: 29px; }
  .public-project-card:has(.project-art) { grid-template-columns: 92px minmax(0, 1fr); gap: 23px; min-height: 225px; padding: 23px; }
  .project-art { width: 92px; height: 105px; border-radius: 21px; }
  .project-art::before { inset: 13px; border-radius: 13px; }
  .project-art > span { font-size: 44px; }
  .project-art > i { width: 29px; height: 29px; font-size: 15px; right: -6px; bottom: -7px; }
  .public-project-card:has(.project-art) h3 { font-size: 23px; }
  .public-project-card:has(.project-art) p { font-size: 11px; }
  .public-footer { display: flex; flex-wrap: wrap; gap: 13px 20px; }
  .public-footer > span { flex-basis: calc(100% - 170px); }
}
@media (max-width: 390px) {
  .topbar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .top-actions { gap: 5px; }
  .top-actions .icon-button { width: 30px; height: 34px; }
  .top-actions .button { padding-left: 8px; padding-right: 8px; font-size: 10px; }
  .search-box { gap: 5px; padding-left: 8px; padding-right: 8px; }
  .category-tab { padding-left: 12px; padding-right: 12px; column-gap: 6px; }
  .public-hero h1 { font-size: 37px; }
  .public-project-card:has(.project-art) { grid-template-columns: 80px minmax(0, 1fr); gap: 21px; padding: 21px; }
  .project-art { width: 80px; height: 96px; }
  .project-art > span { font-size: 40px; }
}