:root {
  color-scheme: dark;
  --ink-950: #071116;
  --ink-900: #0a171e;
  --ink-850: #0e1d25;
  --ink-800: #12242d;
  --ink-700: #1c3641;
  --paper: #f3f0e8;
  --paper-2: #e8e5dc;
  --paper-ink: #18272c;
  --muted: #8ea0a6;
  --muted-dark: #52676e;
  --line: rgba(183, 210, 216, .13);
  --line-strong: rgba(183, 210, 216, .24);
  --cyan: #51d7d0;
  --cyan-soft: rgba(81, 215, 208, .12);
  --amber: #f3b95f;
  --amber-soft: rgba(243, 185, 95, .13);
  --coral: #ff7a6c;
  --coral-soft: rgba(255, 122, 108, .13);
  --blue: #7fa9ff;
  --blue-soft: rgba(127, 169, 255, .13);
  --green: #8bd17c;
  --green-soft: rgba(139, 209, 124, .13);
  --sidebar: 248px;
  --topbar: 66px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow: 0 20px 60px rgba(0, 0, 0, .22);
  --font-sans: "Bahnschrift", "Segoe UI Variable", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink-950); color: #e9f0ef; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; }
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.primary-nav svg:first-child, .icon-sprite symbol:first-child { fill: currentColor; stroke: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0, 0, 0, 0); overflow: hidden; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; background: var(--cyan); color: var(--ink-950); padding: 10px 16px; border-radius: 8px; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 16px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar); background: linear-gradient(180deg, #0d1b22 0%, #09151b 100%); border-right: 1px solid var(--line); padding: 25px 18px 18px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 29px; border-bottom: 1px solid var(--line); }
.brand strong { display: block; letter-spacing: .16em; font-size: 16px; line-height: 1.2; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font: 9px/1 var(--font-mono); letter-spacing: .09em; }
.brand-mark { position: relative; display: flex; align-items: center; gap: 3px; width: 34px; height: 34px; padding: 6px; border: 1px solid rgba(81, 215, 208, .4); transform: rotate(45deg); }
.brand-mark span { display: block; width: 4px; background: var(--cyan); border-radius: 4px; }
.brand-mark span:nth-child(1) { height: 9px; }
.brand-mark span:nth-child(2) { height: 20px; }
.brand-mark span:nth-child(3) { height: 14px; }

.primary-nav { display: grid; gap: 7px; padding: 24px 0; }
.nav-item { min-height: 48px; width: 100%; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #9cafb4; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 11px; padding: 0 12px; text-align: left; cursor: pointer; transition: background .2s, color .2s, border .2s, transform .2s; }
.nav-item:hover { color: #effafa; background: rgba(255,255,255,.035); transform: translateX(2px); }
.nav-item.is-active { color: var(--cyan); background: var(--cyan-soft); border-color: rgba(81,215,208,.16); }
.nav-item svg { width: 18px; }
.nav-item span { font-weight: 650; }
kbd { border: 1px solid var(--line-strong); background: rgba(255,255,255,.03); color: var(--muted); border-radius: 5px; padding: 2px 6px; font: 10px/1.4 var(--font-mono); box-shadow: none; }
.nav-item kbd { opacity: .7; }

.sidebar-legend { margin-top: auto; padding: 18px 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.eyebrow { margin: 0 0 8px; color: var(--cyan); font: 700 10px/1.35 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.eyebrow span { color: var(--cyan); }
.source-row { display: grid; grid-template-columns: 22px 58px 1fr; align-items: center; gap: 6px; min-height: 33px; color: #c6d3d5; }
.source-row svg { width: 15px; height: 15px; }
.source-row span { font: 700 10px var(--font-mono); letter-spacing: .04em; }
.source-row small { color: var(--muted); font-size: 11px; }
.source-code svg { color: var(--coral); }.source-config svg { color: var(--amber); }.source-input svg { color: var(--cyan); }
.sidebar-foot { display: flex; align-items: center; gap: 10px; padding: 21px 9px 3px; }
.sidebar-foot strong, .sidebar-foot small { display: block; }
.sidebar-foot strong { font-size: 11px; color: #d7e1e1; }
.sidebar-foot small { font-size: 9px; color: var(--muted); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px var(--green-soft); }

.workspace { min-height: 100vh; margin-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 25; height: var(--topbar); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(7, 17, 22, .88); backdrop-filter: blur(18px); }
.breadcrumb { display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 12px; color: var(--muted); }
.breadcrumb b { color: var(--ink-700); }.breadcrumb strong { color: #dbe5e4; font-weight: 650; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.search-trigger { width: min(360px, 34vw); height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px 0 12px; display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; text-align: left; }
.search-trigger:hover { border-color: var(--line-strong); color: #dce6e7; }
.search-trigger svg { width: 15px; }.search-trigger span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.coverage-pill { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(139,209,124,.2); background: var(--green-soft); color: #b9dcb2; border-radius: 8px; font-size: 11px; white-space: nowrap; }
.coverage-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.coverage-pill strong { color: #e7f4e4; font: 700 13px var(--font-mono); }
.mobile-menu { display: none; }

main { min-width: 0; }
.view { display: none; animation: view-in .36s ease both; }
.view.is-visible { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero-grid { min-height: 570px; padding: 76px clamp(30px, 5vw, 76px) 64px; display: grid; grid-template-columns: minmax(450px, 1.02fr) minmax(440px, .98fr); align-items: center; gap: 48px; overflow: hidden; background: radial-gradient(circle at 81% 29%, rgba(81,215,208,.10), transparent 27%), linear-gradient(145deg, #09151b, #0b1920 58%, #0d1e25); border-bottom: 1px solid var(--line); }
.hero-copy { max-width: 760px; position: relative; z-index: 2; }
.hero-copy h1, .page-heading h1 { margin: 0; font-size: clamp(44px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.055em; font-weight: 680; }
.hero-copy h1 em { color: var(--cyan); font-style: normal; font-weight: inherit; }
.hero-copy .eyebrow { margin-bottom: 22px; color: #667c83; }
.hero-lead { max-width: 670px; margin: 25px 0 0; color: #9dafb4; font-size: 16px; line-height: 1.85; }
.hero-actions { display: flex; gap: 12px; margin-top: 35px; }
.primary-button, .ghost-button, .text-button { border: 0; cursor: pointer; }
.primary-button, .ghost-button { min-height: 45px; border-radius: 8px; padding: 0 18px; font-weight: 680; }
.primary-button { display: inline-flex; align-items: center; gap: 12px; background: var(--cyan); color: var(--ink-950); }
.primary-button:hover { background: #72e6df; transform: translateY(-1px); box-shadow: 0 10px 32px rgba(81,215,208,.16); }
.primary-button svg { width: 17px; }
.ghost-button { border: 1px solid var(--line-strong); background: rgba(255,255,255,.025); color: #d8e3e3; }
.ghost-button:hover { border-color: rgba(81,215,208,.4); color: var(--cyan); }

.hero-orbit { position: relative; width: 100%; max-width: 610px; min-height: 425px; justify-self: end; }
.orbit-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle, #000 22%, transparent 72%); }
.orbit-node { position: absolute; width: 235px; min-height: 100px; padding: 18px 19px; border: 1px solid var(--line-strong); background: rgba(11,28,35,.91); box-shadow: var(--shadow); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); }
.orbit-node::after { content: ""; position: absolute; right: 0; top: 0; width: 13px; height: 13px; background: var(--cyan); opacity: .5; }
.orbit-node small, .orbit-node strong, .orbit-node span { display: block; }
.orbit-node small { font: 700 9px var(--font-mono); color: var(--cyan); letter-spacing: .1em; }
.orbit-node strong { margin-top: 8px; font-size: 18px; }
.orbit-node span { margin-top: 4px; color: var(--muted); font: 11px var(--font-mono); }
.node-input { left: 0; top: 36px; }.node-router { right: 5px; top: 164px; }.node-output { left: 52px; bottom: 9px; }
.node-router::after { background: var(--amber); }.node-router small { color: var(--amber); }.node-output::after { background: var(--green); }.node-output small { color: var(--green); }
.orbit-connector { position: absolute; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--amber)); transform-origin: left center; }
.orbit-connector i { position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.orbit-connector.c1 { width: 180px; left: 202px; top: 116px; transform: rotate(30deg); }.orbit-connector.c2 { width: 198px; right: 175px; top: 278px; transform: rotate(150deg); background: linear-gradient(90deg, var(--amber), var(--green)); }
.orbit-stamp { position: absolute; right: 32px; top: 26px; width: 116px; height: 116px; border: 1px solid rgba(81,215,208,.28); border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--cyan); transform: rotate(7deg); }
.orbit-stamp::before, .orbit-stamp::after { content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(81,215,208,.15); border-radius: 50%; }.orbit-stamp::after { inset: -6px; }
.orbit-stamp span { font: 700 30px var(--font-mono); }.orbit-stamp small { font: 8px/1.25 var(--font-mono); letter-spacing: .08em; }

.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: var(--ink-900); }
.metric { min-height: 115px; padding: 24px clamp(22px, 3vw, 44px); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 17px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }.metric strong { font: 700 35px var(--font-mono); color: #f2f7f6; }.metric div span, .metric div small { display: block; }.metric div span { font-weight: 650; }.metric div small { color: var(--muted); font-size: 11px; }.metric i { width: 3px; height: 40px; background: var(--cyan); border-radius: 3px; }
.metric:nth-child(2) i { background: var(--amber); }.metric:nth-child(3) i { background: var(--blue); }.metric:nth-child(4) i { background: var(--coral); }

.content-section { padding: 64px clamp(28px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: clamp(27px, 3vw, 40px); line-height: 1.15; letter-spacing: -.035em; }
.section-intro { max-width: 880px; margin: 14px 0 28px; color: var(--muted); }
.text-button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--cyan); background: none; font-size: 12px; font-weight: 700; }.text-button:hover { color: #8cf3ed; }.text-button svg { width: 15px; }

.matrix-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; color: var(--muted); font-size: 11px; }.matrix-legend span { display: inline-flex; align-items: center; gap: 6px; }.dot { width: 7px; height: 7px; border-radius: 2px; }.dot.direct { background: var(--cyan); }.dot.merge { background: var(--amber); }.dot.reuse { background: var(--blue); }.dot.none { border: 1px solid #52676e; }
.matrix-shell { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--ink-900); }
.coverage-matrix { display: grid; grid-template-columns: 106px repeat(9, minmax(82px, 1fr)); min-width: 970px; }
.matrix-corner, .matrix-head, .matrix-row-head, .matrix-cell { min-height: 65px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.matrix-head { display: flex; align-items: center; justify-content: center; color: #c1ced0; font: 650 11px var(--font-mono); background: rgba(255,255,255,.018); }.matrix-corner { padding: 19px 14px; color: #60757b; font: 9px/1.5 var(--font-mono); letter-spacing: .08em; }
.matrix-row-head { display: flex; align-items: center; padding: 0 17px; font: 700 13px var(--font-mono); color: #e6efee; background: rgba(255,255,255,.018); }
.matrix-cell { position: relative; width: 100%; border-top: 0; border-left: 0; background: transparent; display: flex; align-items: center; justify-content: center; padding: 7px; cursor: pointer; }
.matrix-cell:hover, .matrix-cell:focus-visible { z-index: 2; background: rgba(255,255,255,.04); }
.matrix-cell::before { content: ""; width: 10px; height: 10px; border-radius: 3px; transition: transform .2s; }.matrix-cell:hover::before { transform: scale(1.35); }
.matrix-cell span { position: absolute; bottom: 4px; font-size: 8px; color: var(--muted); opacity: 0; transition: opacity .2s; white-space: nowrap; }.matrix-cell:hover span { opacity: 1; }
.matrix-cell.direct::before { background: var(--cyan); box-shadow: 0 0 0 5px var(--cyan-soft); }.matrix-cell.merge::before { background: var(--amber); box-shadow: 0 0 0 5px var(--amber-soft); transform: rotate(45deg); }.matrix-cell.merge:hover::before { transform: rotate(45deg) scale(1.35); }.matrix-cell.reuse::before { background: var(--blue); box-shadow: 0 0 0 5px var(--blue-soft); border-radius: 50%; }.matrix-cell.none { cursor: default; }.matrix-cell.none::before { width: 14px; height: 1px; background: #3a4c52; border-radius: 0; }

.layer-section { background: #0a171d; }.layer-track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-top: 31px; }.layer-track::before { content: ""; position: absolute; left: 7%; right: 7%; top: 39px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--amber), var(--coral)); }.layer-card { position: relative; z-index: 1; min-height: 195px; padding: 23px 17px; background: var(--ink-850); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: transform .2s, border .2s; }.layer-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }.layer-index { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 26px; border: 1px solid var(--cyan); background: var(--ink-850); color: var(--cyan); border-radius: 50%; font: 700 10px var(--font-mono); }.layer-card:nth-child(n+3) .layer-index { color: var(--amber); border-color: var(--amber); }.layer-card:nth-child(n+5) .layer-index { color: var(--coral); border-color: var(--coral); }.layer-card h3 { margin: 0 0 8px; font-size: 15px; }.layer-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }.layer-card small { position: absolute; bottom: 17px; color: #5f747b; font: 9px var(--font-mono); }

.watch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 28px; }.watch-card { min-height: 175px; padding: 22px; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,122,108,.045), transparent 70%); border-radius: 12px; }.watch-card header { display: flex; align-items: center; justify-content: space-between; }.watch-card .risk-id { color: var(--coral); font: 700 10px var(--font-mono); }.watch-card .risk-level { padding: 3px 7px; border: 1px solid rgba(255,122,108,.22); color: #ffaca3; border-radius: 4px; font-size: 9px; }.watch-card h3 { margin: 20px 0 8px; font-size: 15px; }.watch-card p { margin: 0; color: var(--muted); font-size: 12px; }

.page-heading { padding: 70px clamp(28px, 5vw, 72px) 48px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 80% -30%, rgba(81,215,208,.1), transparent 35%); }.page-heading.compact { min-height: 236px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }.page-heading.compact h1 { font-size: clamp(38px, 4vw, 58px); }.page-heading > p:not(.eyebrow), .page-heading div > p { max-width: 760px; color: var(--muted); margin: 13px 0 0; }.result-count { display: flex; align-items: baseline; gap: 9px; padding-bottom: 8px; }.result-count strong { font: 700 48px var(--font-mono); color: var(--cyan); }.result-count span { color: var(--muted); }
.catalog-layout { display: grid; grid-template-columns: 270px 1fr; min-height: calc(100vh - var(--topbar) - 236px); }.filter-panel { padding: 26px 20px; border-right: 1px solid var(--line); background: #09151b; }.filter-title { display: flex; align-items: center; gap: 9px; margin-bottom: 24px; }.filter-title svg { width: 16px; color: var(--cyan); }.filter-title strong { flex: 1; font-size: 13px; }.filter-title button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; }.filter-title button:hover { color: var(--cyan); }
.field-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; }.input-shell { height: 42px; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 8px; display: flex; align-items: center; gap: 9px; padding: 0 11px; }.input-shell:focus-within { border-color: rgba(81,215,208,.55); box-shadow: 0 0 0 3px rgba(81,215,208,.06); }.input-shell svg { width: 15px; color: var(--muted); }.input-shell input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #e9f0ef; font-size: 12px; }.input-shell input::placeholder { color: #60737a; }
.filter-group { padding: 21px 0; border-bottom: 1px solid var(--line); }.filter-group h3 { margin: 0 0 11px; color: #c4d1d2; font-size: 11px; }.filter-options { display: flex; flex-wrap: wrap; gap: 6px; }.filter-chip { min-height: 31px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }.filter-chip:hover { border-color: var(--line-strong); color: #dce5e5; }.filter-chip.is-active { color: var(--cyan); border-color: rgba(81,215,208,.35); background: var(--cyan-soft); }
.catalog-main { padding: 24px clamp(22px, 3vw, 42px) 64px; min-width: 0; }.active-filters { min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 15px; }.active-filters:empty::after { content: "当前显示全部规则"; color: #60747a; font-size: 11px; }.active-filter { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 5px; background: var(--cyan-soft); color: #9ee9e4; font-size: 10px; }.active-filter button { width: 16px; height: 16px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }.active-filter svg { width: 11px; height: 11px; }
.rule-list { display: grid; gap: 10px; }.rule-card { width: 100%; display: grid; grid-template-columns: 84px minmax(180px, 1.4fr) minmax(190px, 1fr) 150px 22px; align-items: center; gap: 19px; padding: 18px 19px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-900); color: inherit; text-align: left; cursor: pointer; transition: border .2s, transform .2s, background .2s; }.rule-card:hover { transform: translateX(3px); border-color: rgba(81,215,208,.28); background: #0d1c23; }.rule-id { color: var(--cyan); font: 700 10px var(--font-mono); }.rule-card h3 { margin: 0 0 4px; font-size: 14px; }.rule-card p { margin: 0; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.rule-scope { display: flex; flex-wrap: wrap; gap: 5px; }.mini-tag, .source-badge, .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; color: #a9b9bc; font: 9px var(--font-mono); }.source-badges { display: flex; flex-wrap: wrap; gap: 4px; }.source-badge.code { color: #ffaaa1; border-color: rgba(255,122,108,.25); background: var(--coral-soft); }.source-badge.config { color: #f6cd8e; border-color: rgba(243,185,95,.25); background: var(--amber-soft); }.source-badge.input { color: #90e9e4; border-color: rgba(81,215,208,.25); background: var(--cyan-soft); }.rule-card > svg { color: #50656b; width: 16px; }.empty-state { padding: 90px 20px; text-align: center; }.empty-state > svg { width: 40px; height: 40px; color: #4f666d; }.empty-state h3 { margin: 16px 0 4px; }.empty-state p { color: var(--muted); }

.mode-toggle { display: flex; padding: 3px; border: 1px solid var(--line); background: rgba(255,255,255,.02); border-radius: 8px; }.mode-toggle button { min-width: 64px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }.mode-toggle button.is-active { background: var(--cyan); color: var(--ink-950); font-weight: 700; }
.flow-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100vh - var(--topbar) - 236px); }.flow-index { border-right: 1px solid var(--line); background: #09151b; padding: 20px 15px 50px; }.flow-index > .input-shell { margin-bottom: 18px; }.flow-group-title { display: flex; justify-content: space-between; padding: 12px 8px 7px; color: #647980; font: 700 9px var(--font-mono); letter-spacing: .1em; }.flow-rule-button { width: 100%; min-height: 42px; display: grid; grid-template-columns: 55px 1fr; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #a4b4b7; text-align: left; cursor: pointer; font-size: 11px; }.flow-rule-button span:first-child { color: #61767c; font: 9px var(--font-mono); }.flow-rule-button:hover { background: rgba(255,255,255,.025); color: #e4ecec; }.flow-rule-button.is-active { background: var(--cyan-soft); border-color: rgba(81,215,208,.16); color: var(--cyan); }.rule-detail { min-width: 0; padding: 38px clamp(24px, 4vw, 58px) 80px; background-image: linear-gradient(rgba(183,210,216,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(183,210,216,.025) 1px, transparent 1px); background-size: 32px 32px; }
.detail-head { display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: start; margin-bottom: 30px; }.detail-head h2 { margin: 7px 0 9px; font-size: clamp(28px, 3vw, 42px); line-height: 1.14; letter-spacing: -.035em; }.detail-head p { max-width: 800px; margin: 0; color: var(--muted); }.detail-id { color: var(--cyan); font: 700 11px var(--font-mono); letter-spacing: .08em; }.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }.detail-copy { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-850); color: var(--muted); cursor: pointer; }.detail-copy:hover { color: var(--cyan); border-color: rgba(81,215,208,.3); }.detail-copy svg { width: 17px; }
.detail-section { margin-top: 22px; padding: 23px; border: 1px solid var(--line); background: rgba(10,23,30,.93); border-radius: 12px; }.detail-section-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }.detail-section-title h3 { margin: 0; font-size: 14px; }.detail-section-title small { color: var(--muted); font: 9px var(--font-mono); }.input-tokens { display: flex; flex-wrap: wrap; gap: 7px; }.variable-token { padding: 6px 9px; border: 1px solid rgba(81,215,208,.2); border-radius: 5px; color: #a8e8e4; background: var(--cyan-soft); font: 10px var(--font-mono); }
.decision-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 27px; }.decision-step { position: relative; min-height: 128px; padding: 17px; border: 1px solid var(--line); background: var(--ink-850); border-radius: 8px; }.decision-step:not(:last-child)::after { content: "→"; position: absolute; right: -21px; top: 47px; color: var(--cyan); font: 17px var(--font-mono); }.decision-step.kind-condition { border-color: rgba(243,185,95,.22); }.decision-step.kind-compose { border-color: rgba(255,122,108,.2); }.decision-step small { color: var(--cyan); font: 700 8px var(--font-mono); letter-spacing: .08em; }.decision-step.kind-condition small { color: var(--amber); }.decision-step.kind-compose small { color: var(--coral); }.decision-step strong { display: block; margin: 8px 0 5px; font-size: 12px; }.decision-step p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.condition-list, .exception-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }.condition-list li, .exception-list li { position: relative; padding: 10px 12px 10px 32px; border-left: 2px solid var(--amber); background: var(--amber-soft); color: #c9d2d1; font-size: 11px; }.condition-list li::before { content: "IF"; position: absolute; left: 8px; top: 11px; color: var(--amber); font: 700 8px var(--font-mono); }.exception-list li { border-left-color: var(--coral); background: var(--coral-soft); }.exception-list li::before { content: "!"; position: absolute; left: 12px; color: var(--coral); font-weight: 800; }
.template-box { position: relative; padding: 22px; border: 1px solid rgba(81,215,208,.22); background: #061015; border-radius: 8px; color: #dbe7e6; font: 12px/1.9 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }.template-box .var { padding: 2px 5px; border-radius: 4px; background: var(--cyan-soft); color: var(--cyan); }.template-box .html { color: var(--amber); }.rendered-output { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--paper-ink); line-height: 1.9; }.rendered-output b { color: #102b32; }.rendered-output i { color: #485b60; }
.subtabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; }.subtabs button { border: 0; background: none; color: var(--muted); padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 9px; }.subtabs button.is-active { background: rgba(255,255,255,.08); color: #e5eeee; }.detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.source-ref { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }.source-ref:last-child { border: 0; }.source-ref svg { width: 15px; color: var(--coral); margin-top: 3px; }.source-ref code { display: block; color: #b9c9ca; font: 10px/1.6 var(--font-mono); overflow-wrap: anywhere; }.source-ref small { color: var(--muted); }

.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 42px clamp(28px, 5vw, 72px) 16px; }.note-card { min-height: 245px; padding: 25px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-900); }.note-card.wide { grid-column: span 2; }.note-card header { display: flex; align-items: center; gap: 10px; }.note-card header svg { color: var(--cyan); }.note-card h2 { margin: 0; font-size: 17px; }.note-card p { color: var(--muted); font-size: 12px; }.note-card ul { margin: 16px 0 0; padding-left: 18px; color: #b6c4c6; font-size: 11px; }.note-card li { margin: 8px 0; }.sentinel-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }.sentinel { padding: 7px 10px; border: 1px solid rgba(255,122,108,.2); background: var(--coral-soft); border-radius: 6px; color: #ffb4ac; font: 11px var(--font-mono); }
.provenance-section { border: 0; }.source-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 25px; }.source-file-card { display: grid; grid-template-columns: 50px 1fr; gap: 13px; padding: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.015); border-radius: 8px; }.source-file-card span { color: var(--coral); font: 700 10px var(--font-mono); }.source-file-card code { color: #cad5d6; font: 11px var(--font-mono); overflow-wrap: anywhere; }.source-file-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }

.command-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: 12vh 20px 20px; }.command-overlay[hidden] { display: none; }.overlay-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(2,8,11,.76); backdrop-filter: blur(8px); cursor: default; }.command-dialog { position: relative; width: min(680px, 100%); max-height: 68vh; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: #0c1a21; box-shadow: 0 30px 100px rgba(0,0,0,.55); }.command-input { height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); }.command-input svg { color: var(--cyan); }.command-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #eef5f4; font-size: 15px; }.command-meta { display: flex; justify-content: space-between; padding: 11px 17px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }.command-meta strong { color: #bccacc; font-weight: 600; }.command-results { max-height: calc(68vh - 103px); overflow-y: auto; padding: 8px; }.command-result { width: 100%; min-height: 55px; display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; background: none; color: inherit; text-align: left; cursor: pointer; }.command-result:hover, .command-result.is-selected { background: var(--cyan-soft); border-color: rgba(81,215,208,.13); }.command-result .rule-id { color: var(--cyan); }.command-result strong { display: block; font-size: 12px; }.command-result small { color: var(--muted); }.command-result > span:last-child { color: #6a7e84; font: 9px var(--font-mono); }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 120; display: flex; align-items: center; gap: 8px; padding: 11px 15px; border: 1px solid rgba(139,209,124,.3); border-radius: 8px; background: #11261f; color: #bfe3b8; box-shadow: var(--shadow); transform: translateY(30px); opacity: 0; pointer-events: none; transition: .25s ease; }.toast.is-visible { transform: none; opacity: 1; }.toast svg { width: 15px; }

@media (max-width: 1180px) {
  :root { --sidebar: 216px; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 20px; }.hero-copy h1 { font-size: 51px; }.orbit-node { width: 205px; }.coverage-pill { display: none; }.layer-track { grid-template-columns: repeat(3, 1fr); }.layer-track::before { display: none; }.layer-card { min-height: 165px; }.watch-grid { grid-template-columns: repeat(2, 1fr); }.rule-card { grid-template-columns: 72px minmax(190px, 1fr) 150px 22px; }.rule-card .rule-scope { display: none; }
}
@media (max-width: 900px) {
  :root { --sidebar: 248px; }
  .sidebar { transform: translateX(-100%); transition: transform .25s; box-shadow: 20px 0 60px rgba(0,0,0,.5); }.sidebar.is-open { transform: none; }.workspace { margin-left: 0; }.mobile-menu { width: 42px; height: 42px; border: 0; background: transparent; display: grid; place-content: center; gap: 6px; cursor: pointer; }.mobile-menu span { width: 20px; height: 1px; background: #cbd7d8; }.breadcrumb span, .breadcrumb b { display: none; }.topbar { padding: 0 16px; }.hero-grid { min-height: auto; grid-template-columns: 1fr; padding-top: 55px; }.hero-copy { max-width: 680px; }.hero-orbit { justify-self: center; margin-top: 15px; }.metric-strip { grid-template-columns: repeat(2, 1fr); }.metric:nth-child(2) { border-right: 0; }.metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.matrix-shell { overflow-x: auto; }.catalog-layout, .flow-layout { grid-template-columns: 1fr; }.filter-panel { border-right: 0; border-bottom: 1px solid var(--line); }.flow-index { border-right: 0; border-bottom: 1px solid var(--line); max-height: 320px; overflow-y: auto; }.notes-grid { grid-template-columns: repeat(2, 1fr); }.note-card.wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .topbar { height: 58px; }.search-trigger { width: 42px; justify-content: center; }.search-trigger span, .search-trigger kbd { display: none; }.hero-grid { padding: 44px 20px; }.hero-copy h1 { font-size: 39px; }.hero-lead { font-size: 14px; }.hero-actions { align-items: stretch; flex-direction: column; }.hero-orbit { min-height: 360px; transform: scale(.86); transform-origin: center top; margin-bottom: -45px; }.orbit-stamp { right: 0; }.metric-strip { grid-template-columns: 1fr 1fr; }.metric { min-height: 96px; padding: 18px; grid-template-columns: auto 1fr; gap: 11px; }.metric strong { font-size: 28px; }.content-section { padding: 46px 20px; }.section-heading { align-items: start; flex-direction: column; }.matrix-legend { justify-content: flex-start; }.layer-track, .watch-grid { grid-template-columns: 1fr; }.layer-card { min-height: 145px; }.page-heading, .page-heading.compact { min-height: auto; padding: 48px 20px 35px; align-items: start; flex-direction: column; }.page-heading h1, .page-heading.compact h1 { font-size: 40px; }.result-count { padding: 0; }.catalog-main { padding: 20px; }.rule-card { grid-template-columns: 58px 1fr 18px; gap: 10px; }.rule-card .source-badges { display: none; }.detail-columns { grid-template-columns: 1fr; }.rule-detail { padding: 28px 18px 60px; }.decision-chain { grid-template-columns: 1fr; }.decision-step:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -24px; }.notes-grid { grid-template-columns: 1fr; padding: 30px 20px 0; }.note-card.wide { grid-column: auto; }.source-map { grid-template-columns: 1fr; }.command-overlay { padding: 8vh 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ─────────────────────────────────────────────────────────────
   双版本入口
   专业图谱保留原样；阳光导览使用独立的浅色设计系统。
   ───────────────────────────────────────────────────────────── */
.simple-experience { display: none; }
body.experience-simple { color-scheme: light; background: #fbf8ee; }
body.experience-simple .app-shell { display: none; }
body.experience-simple .simple-experience { display: block; }
body.experience-simple .command-overlay { display: none !important; }
body.experience-expert .simple-experience { display: none; }

.experience-switch { min-height: 40px; display: flex; align-items: center; padding: 3px; border-radius: 10px; }
.experience-switch button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 7px; padding: 0 10px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.experience-switch svg { width: 14px; height: 14px; }
.experience-switch-dark { border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.experience-switch-dark button { color: #73888e; }
.experience-switch-dark button:hover { color: #dce7e7; }
.experience-switch-dark button.is-active { background: var(--cyan); color: var(--ink-950); box-shadow: 0 5px 18px rgba(81,215,208,.13); }

/* 阳光导览 · design tokens */
.simple-experience {
  --sun-bg: #fbf8ee;
  --sun-paper: #fffdf8;
  --sun-ink: #21372f;
  --sun-body: #52675e;
  --sun-muted: #77887f;
  --sun-line: #dfe5d8;
  --sun-line-strong: #c9d5c5;
  --sun-yellow: #f5c451;
  --sun-yellow-deep: #d89416;
  --sun-yellow-soft: #fff3c4;
  --sun-sky: #75bfd0;
  --sun-sky-soft: #e3f4f5;
  --sun-leaf: #4d9367;
  --sun-leaf-soft: #e5f2e6;
  --sun-coral: #eb795f;
  --sun-coral-soft: #fdebe3;
  --sun-blue: #4f79b8;
  --sun-shadow: 0 18px 52px rgba(69, 92, 71, .10);
  min-height: 100vh;
  overflow: hidden;
  background: var(--sun-bg);
  color: var(--sun-ink);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
.simple-experience button, .simple-experience input { font: inherit; }
.simple-experience button:focus-visible, .simple-experience input:focus-visible, .simple-experience a:focus-visible { outline: 3px solid var(--sun-blue); outline-offset: 3px; }
.simple-experience svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.simple-container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.simple-topbar { position: sticky; top: 0; z-index: 70; min-height: 72px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid rgba(201,213,197,.75); background: rgba(255,253,248,.9); backdrop-filter: blur(16px); }
.simple-brand { min-height: 48px; display: flex; align-items: center; gap: 11px; color: var(--sun-ink); text-decoration: none; }
.simple-brand > span:last-child { display: block; }
.simple-brand strong, .simple-brand small { display: block; }
.simple-brand strong { font: 800 16px/1.1 "Bahnschrift", sans-serif; letter-spacing: .16em; }
.simple-brand small { margin-top: 3px; color: var(--sun-muted); font: 8px/1.1 var(--font-mono); letter-spacing: .08em; }
.simple-brand-mark { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--sun-yellow); box-shadow: 0 0 0 6px var(--sun-yellow-soft); }
.simple-brand-mark::after { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--sun-paper); }
.simple-brand-mark i { position: absolute; width: 2px; height: 27px; border-radius: 2px; background: var(--sun-yellow-deep); }
.simple-brand-mark i:nth-child(2) { transform: rotate(60deg); }.simple-brand-mark i:nth-child(3) { transform: rotate(120deg); }
.simple-nav { display: flex; align-items: center; justify-content: center; gap: 27px; }
.simple-nav a { min-height: 44px; display: inline-flex; align-items: center; color: #52685e; text-decoration: none; font-size: 13px; font-weight: 650; }
.simple-nav a:hover { color: var(--sun-leaf); }
.experience-switch-light { border: 1px solid var(--sun-line); background: #f3f2e9; }
.experience-switch-light button { color: #73827a; }
.experience-switch-light button:hover { color: var(--sun-ink); }
.experience-switch-light button.is-active { background: var(--sun-paper); color: var(--sun-ink); box-shadow: 0 3px 12px rgba(59,79,62,.11); }
.experience-switch-light button.is-active[data-experience="simple"] svg { color: var(--sun-yellow-deep); }

.simple-hero { position: relative; min-height: 660px; display: grid; align-items: center; overflow: hidden; border-bottom: 1px solid var(--sun-line); background: linear-gradient(115deg, #fffaf0 0%, #f7fbef 54%, #eaf7f3 100%); }
.simple-hero::before { content: ""; position: absolute; inset: 0; opacity: .34; background-image: radial-gradient(#9db5a3 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent, #000 48%, transparent); }
.sun-wash { position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border-radius: 50%; background: rgba(245,196,81,.19); box-shadow: 0 0 0 52px rgba(245,196,81,.07), 0 0 0 104px rgba(245,196,81,.035); }
.sun-wash span { position: absolute; left: 50%; top: 50%; width: 2px; height: 690px; background: linear-gradient(var(--sun-yellow), transparent 40%); transform-origin: 50% 0; opacity: .34; }
.sun-wash span:nth-child(1) { transform: rotate(35deg); }.sun-wash span:nth-child(2) { transform: rotate(62deg); }.sun-wash span:nth-child(3) { transform: rotate(89deg); }
.simple-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 70px; padding-block: 78px; }
.simple-kicker { margin: 0 0 14px; color: var(--sun-leaf); font: 800 11px/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.simple-kicker svg { width: 17px; height: 17px; margin-right: 7px; vertical-align: -4px; color: var(--sun-yellow-deep); }
.simple-hero-copy h1 { margin: 0; max-width: 660px; color: var(--sun-ink); font-family: "STZhongsong", "FZShuSong-Z01", "Microsoft YaHei UI", sans-serif; font-size: clamp(52px, 5.7vw, 78px); line-height: 1.06; letter-spacing: -.055em; font-weight: 700; }
.simple-hero-copy h1 em { position: relative; color: var(--sun-leaf); font-style: normal; }
.simple-hero-copy h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 10px; background: var(--sun-yellow); opacity: .55; z-index: -1; transform: rotate(-1deg); }
.simple-hero-copy > p:not(.simple-kicker) { max-width: 650px; margin: 24px 0 0; color: var(--sun-body); font-size: 17px; line-height: 1.9; }
.simple-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.sun-button, .paper-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 11px; padding: 0 18px; text-decoration: none; font-weight: 750; cursor: pointer; transition: box-shadow .2s, background .2s, color .2s, transform .2s; }
.sun-button { border: 1px solid #d9a72e; background: var(--sun-yellow); color: #3b341e; box-shadow: 0 9px 24px rgba(216,148,22,.16); }
.sun-button:hover { background: #f8d16c; transform: translateY(-2px); box-shadow: 0 13px 30px rgba(216,148,22,.22); }
.sun-button svg, .simple-pro-note button svg { width: 17px; }
.paper-button { border: 1px solid var(--sun-line-strong); background: rgba(255,255,255,.62); color: var(--sun-body); }
.paper-button:hover { color: var(--sun-leaf); background: var(--sun-paper); transform: translateY(-2px); }
.simple-stats { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 37px; color: var(--sun-muted); font-size: 12px; }
.simple-stats span { display: inline-flex; align-items: baseline; gap: 5px; }
.simple-stats strong { color: var(--sun-ink); font: 800 23px var(--font-mono); }

.simple-hero-visual { position: relative; min-height: 480px; }
.sun-orbit { position: absolute; inset: 5% 0 0 5%; border: 1px dashed rgba(77,147,103,.25); border-radius: 50%; transform: rotate(-12deg); }
.sun-orbit::before, .sun-orbit::after { content: ""; position: absolute; border: 1px solid rgba(117,191,208,.2); border-radius: 50%; }
.sun-orbit::before { inset: 38px; }.sun-orbit::after { inset: 82px; }
.sun-orbit i { position: absolute; width: 11px; height: 11px; border: 2px solid var(--sun-paper); border-radius: 50%; background: var(--sun-yellow-deep); box-shadow: 0 0 0 5px var(--sun-yellow-soft); }
.sun-orbit i:nth-child(1) { left: 9%; top: 18%; }.sun-orbit i:nth-child(2) { right: 12%; top: 30%; background: var(--sun-sky); box-shadow: 0 0 0 5px var(--sun-sky-soft); }.sun-orbit i:nth-child(3) { left: 33%; bottom: 9%; background: var(--sun-leaf); box-shadow: 0 0 0 5px var(--sun-leaf-soft); }
.sample-card { position: absolute; width: 270px; min-height: 145px; padding: 22px; border: 1px solid var(--sun-line); border-radius: 18px; background: rgba(255,253,248,.94); box-shadow: var(--sun-shadow); }
.sample-card:nth-of-type(1) { left: 2%; top: 8%; transform: rotate(-3deg); }.sample-card:nth-of-type(2) { right: 0; top: 35%; transform: rotate(2deg); }.sample-card:nth-of-type(3) { left: 14%; bottom: 2%; transform: rotate(-1deg); }
.sample-card > span { display: inline-flex; padding: 3px 8px; border-radius: 99px; background: var(--sun-yellow-soft); color: #8c6510; font-size: 10px; font-weight: 800; }
.sample-card:nth-of-type(2) > span { background: var(--sun-sky-soft); color: #356d78; }.sample-card:nth-of-type(3) > span { background: var(--sun-leaf-soft); color: #3c7551; }
.sample-card > svg { position: absolute; right: 20px; top: 20px; width: 28px; height: 28px; color: var(--sun-leaf); }
.sample-card strong, .sample-card small { display: block; }.sample-card strong { margin-top: 20px; font-size: 16px; }.sample-card small { margin-top: 3px; color: var(--sun-muted); font-size: 12px; }

.simple-section { position: relative; padding: 92px 0; scroll-margin-top: 72px; }
.simple-section-head { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 38px; }
.simple-section-head h2 { margin: 0; color: var(--sun-ink); font-family: "STZhongsong", "FZShuSong-Z01", "Microsoft YaHei UI", sans-serif; font-size: clamp(34px, 4vw, 51px); line-height: 1.15; letter-spacing: -.04em; }
.simple-section-head > p { max-width: 470px; margin: 0; color: var(--sun-body); line-height: 1.85; }
.simple-journey-section { background: var(--sun-paper); }
.simple-journey { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.simple-journey::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 2px; background: linear-gradient(90deg, var(--sun-yellow), var(--sun-sky), var(--sun-leaf), var(--sun-coral)); }
.simple-journey-card { position: relative; z-index: 1; min-height: 228px; padding: 20px 17px; border: 1px solid var(--sun-line); border-radius: 15px; background: var(--sun-paper); box-shadow: 0 8px 28px rgba(60,82,63,.055); }
.simple-journey-card .journey-number { width: 30px; height: 30px; display: grid; place-items: center; margin-bottom: 29px; border: 2px solid var(--sun-yellow-deep); border-radius: 50%; background: var(--sun-paper); color: #926711; font: 800 10px var(--font-mono); }
.simple-journey-card:nth-child(2n) .journey-number { border-color: var(--sun-sky); color: #3f7a86; }.simple-journey-card:nth-child(n+4) .journey-number { border-color: var(--sun-leaf); color: var(--sun-leaf); }
.simple-journey-card h3 { margin: 0 0 8px; font-size: 15px; }.simple-journey-card p { margin: 0; color: var(--sun-body); font-size: 12px; line-height: 1.75; }.simple-journey-card small { position: absolute; left: 17px; bottom: 18px; color: var(--sun-muted); font: 9px var(--font-mono); }

.simple-modules-section { background: #f6f8ef; }
.simple-module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.simple-module-card { position: relative; min-height: 275px; overflow: hidden; padding: 25px; border: 1px solid var(--sun-line); border-radius: 18px; background: var(--sun-paper); box-shadow: 0 9px 34px rgba(70,91,72,.06); transition: transform .2s, box-shadow .2s, border .2s; }
.simple-module-card:hover { transform: translateY(-4px); border-color: var(--sun-line-strong); box-shadow: var(--sun-shadow); }
.simple-module-card.featured { grid-column: span 2; background: linear-gradient(135deg, #fffdf8, #fff7d8); }
.simple-module-card::after { content: attr(data-module); position: absolute; right: -4px; top: -21px; color: rgba(33,55,47,.045); font: 800 110px/1 "Bahnschrift", sans-serif; }
.simple-module-top { position: relative; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.simple-module-id { min-width: 49px; height: 33px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--sun-ink); color: #fff; font: 800 13px var(--font-mono); }
.simple-module-card.featured .simple-module-id { background: var(--sun-yellow); color: #47391b; }
.simple-module-top span:last-child { color: var(--sun-muted); font-size: 11px; }
.simple-module-card h3 { position: relative; z-index: 1; margin: 21px 0 6px; font-size: 19px; }.simple-module-card > p { position: relative; z-index: 1; margin: 0; color: var(--sun-body); font-size: 13px; }
.simple-supported { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.simple-supported span { padding: 4px 8px; border: 1px solid #d3dfd0; border-radius: 6px; background: var(--sun-leaf-soft); color: #3e7450; font: 10px var(--font-mono); }
.simple-module-note { position: relative; z-index: 1; display: flex; align-items: start; gap: 8px; margin-top: 18px; padding-top: 15px; border-top: 1px dashed var(--sun-line); color: var(--sun-muted); font-size: 11px; }
.simple-module-note svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--sun-coral); }

.simple-rules-section { background: var(--sun-paper); }
.simple-rule-head { align-items: center; }
.simple-rule-count { display: flex; align-items: baseline; gap: 9px; padding: 12px 18px; border: 1px solid var(--sun-line); border-radius: 13px; background: #f7f5ec; }
.simple-rule-count strong { color: var(--sun-leaf); font: 800 30px var(--font-mono); }.simple-rule-count span { color: var(--sun-muted); font-size: 12px; }
.simple-rule-tools { display: grid; grid-template-columns: minmax(260px, .78fr) 1.8fr; align-items: center; gap: 18px; padding: 17px; border: 1px solid var(--sun-line); border-radius: 16px; background: #f8f7ef; }
.simple-search { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--sun-line-strong); border-radius: 10px; background: var(--sun-paper); }
.simple-search:focus-within { border-color: var(--sun-leaf); box-shadow: 0 0 0 4px rgba(77,147,103,.10); }
.simple-search svg { width: 18px; color: var(--sun-muted); }.simple-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--sun-ink); font-size: 14px; }.simple-search input::placeholder { color: #8b9991; }
.simple-variant-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.simple-filter-chip { min-height: 38px; padding: 0 11px; border: 1px solid var(--sun-line); border-radius: 8px; background: var(--sun-paper); color: var(--sun-body); cursor: pointer; font-size: 11px; font-weight: 700; }
.simple-filter-chip:hover { border-color: var(--sun-leaf); color: var(--sun-leaf); }.simple-filter-chip.is-active { border-color: var(--sun-leaf); background: var(--sun-leaf); color: #fff; }
.simple-helper { display: flex; align-items: center; gap: 8px; margin: 17px 2px 25px; color: var(--sun-muted); font-size: 12px; }.simple-helper svg { flex: 0 0 auto; width: 16px; color: var(--sun-sky); }.simple-helper code { padding: 2px 5px; border-radius: 4px; background: var(--sun-sky-soft); color: #376f7a; font: 11px var(--font-mono); }
.simple-rule-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.simple-rule-card { position: relative; min-height: 340px; display: flex; flex-direction: column; overflow: hidden; padding: 25px; border: 1px solid var(--sun-line); border-radius: 17px; background: var(--sun-paper); box-shadow: 0 8px 28px rgba(68,89,69,.055); animation: sunny-card-in .35s ease both; }
@keyframes sunny-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.simple-rule-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sun-yellow); }.simple-rule-card[data-tone="sky"]::before { background: var(--sun-sky); }.simple-rule-card[data-tone="leaf"]::before { background: var(--sun-leaf); }.simple-rule-card[data-tone="coral"]::before { background: var(--sun-coral); }
.simple-rule-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.simple-rule-id { color: var(--sun-leaf); font: 800 10px var(--font-mono); letter-spacing: .06em; }.simple-rule-layer { padding: 3px 7px; border-radius: 5px; background: #f0f2e9; color: var(--sun-muted); font-size: 10px; }
.simple-rule-card h3 { margin: 16px 0 8px; font-size: 20px; line-height: 1.4; }.simple-rule-card > p { margin: 0; color: var(--sun-body); font-size: 13px; line-height: 1.8; }
.simple-rule-plain { display: grid; gap: 9px; margin: 20px 0; }
.simple-plain-row { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: start; padding-top: 9px; border-top: 1px dashed var(--sun-line); }
.simple-plain-row strong { color: var(--sun-muted); font-size: 10px; }.simple-plain-row span, .simple-plain-row code { color: var(--sun-ink); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }.simple-plain-row code { font-family: var(--font-mono); color: #466c78; }
.simple-rule-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 15px; }
.simple-scope { display: flex; flex-wrap: wrap; gap: 5px; }.simple-scope span { padding: 3px 6px; border-radius: 5px; background: var(--sun-yellow-soft); color: #826015; font: 9px var(--font-mono); }
.simple-detail-button { min-height: 42px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--sun-line-strong); border-radius: 9px; padding: 0 12px; background: var(--sun-paper); color: var(--sun-leaf); cursor: pointer; font-size: 11px; font-weight: 750; }.simple-detail-button:hover { background: var(--sun-leaf-soft); border-color: var(--sun-leaf); }.simple-detail-button svg { width: 14px; }
.simple-more { min-height: 48px; margin: 26px auto 0; display: flex; align-items: center; gap: 8px; padding: 0 19px; border: 1px solid var(--sun-line-strong); border-radius: 10px; background: #f7f5ec; color: var(--sun-body); cursor: pointer; font-weight: 700; }.simple-more:hover { color: var(--sun-leaf); border-color: var(--sun-leaf); }.simple-more svg { width: 15px; }
.simple-empty { padding: 65px 20px; text-align: center; }.simple-empty svg { width: 34px; height: 34px; color: var(--sun-muted); }.simple-empty h3 { margin: 12px 0 4px; }.simple-empty p { margin: 0; color: var(--sun-muted); }

.simple-confusions-section { background: linear-gradient(150deg, #f7f8ef, #fff7dc); }
.simple-confusion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.simple-confusion-card { min-height: 205px; padding: 23px; border: 1px solid var(--sun-line); border-radius: 17px; background: rgba(255,253,248,.86); }
.simple-confusion-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.simple-confusion-card header span:first-child { color: var(--sun-coral); font: 800 10px var(--font-mono); }.simple-confusion-card header span:last-child { padding: 3px 7px; border-radius: 5px; background: var(--sun-coral-soft); color: #a64e3c; font-size: 9px; }
.simple-confusion-card h3 { margin: 20px 0 8px; font-size: 16px; }.simple-confusion-card p { margin: 0; color: var(--sun-body); font-size: 12px; }
.simple-pro-note { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; margin-top: 17px; padding: 22px; border: 1px solid #d5d0bd; border-radius: 16px; background: var(--sun-ink); color: #f4f8f4; }
.simple-pro-note > svg { width: 29px; height: 29px; color: var(--sun-yellow); }.simple-pro-note strong { font-size: 14px; }.simple-pro-note p { margin: 3px 0 0; color: #b9c6c0; font-size: 12px; }.simple-pro-note button { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; padding: 0 14px; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; font-size: 11px; font-weight: 750; }.simple-pro-note button:hover { border-color: var(--sun-yellow); color: var(--sun-yellow); }
.simple-footer { padding: 30px 0; border-top: 1px solid var(--sun-line); background: #eff2e8; }.simple-footer .simple-container { display: flex; align-items: center; gap: 22px; }.simple-footer span { color: var(--sun-leaf); font: 800 10px var(--font-mono); letter-spacing: .08em; }.simple-footer p { flex: 1; margin: 0; color: var(--sun-muted); font-size: 11px; }.simple-footer button { min-height: 42px; border: 1px solid var(--sun-line-strong); border-radius: 8px; padding: 0 12px; background: var(--sun-paper); color: var(--sun-body); cursor: pointer; font-size: 11px; }.simple-footer button:hover { color: var(--sun-leaf); }

@media (max-width: 1180px) {
  .experience-switch-dark button span { display: none; }
  .experience-switch-dark button { width: 34px; padding: 0; }
  .simple-nav { gap: 16px; }.simple-nav a { font-size: 11px; }
  .simple-hero-grid { gap: 28px; }.sample-card { width: 235px; }
  .simple-journey { grid-template-columns: repeat(3, 1fr); }.simple-journey::before { display: none; }.simple-journey-card { min-height: 190px; }.simple-journey-card small { position: static; display: block; margin-top: 16px; }
}

@media (max-width: 900px) {
  .simple-topbar { grid-template-columns: auto 1fr; padding-inline: 20px; }.simple-nav { display: none; }.simple-topbar .experience-switch { justify-self: end; }
  .simple-hero-grid { grid-template-columns: 1fr; gap: 38px; }.simple-hero-copy { max-width: 680px; }.simple-hero-visual { width: min(620px, 100%); justify-self: center; }
  .simple-section-head { align-items: start; flex-direction: column; gap: 13px; }
  .simple-module-grid { grid-template-columns: repeat(2, 1fr); }.simple-module-card.featured { grid-column: span 2; }
  .simple-rule-tools { grid-template-columns: 1fr; }.simple-variant-filters { justify-content: flex-start; }
  .simple-confusion-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .simple-container { width: min(100% - 32px, 1180px); }
  .simple-topbar { min-height: 64px; padding-inline: 15px; gap: 10px; }.simple-brand small { display: none; }.simple-brand strong { font-size: 13px; }.simple-brand-mark { width: 31px; height: 31px; }.simple-brand-mark i { height: 22px; }
  .experience-switch-light { min-height: 42px; }.experience-switch-light button { min-height: 36px; padding-inline: 9px; }.experience-switch-light button span { display: none; }.experience-switch-light button svg { width: 17px; height: 17px; }
  .simple-hero { min-height: auto; }.simple-hero-grid { padding-block: 56px; }.simple-hero-copy h1 { font-size: 44px; }.simple-hero-copy > p:not(.simple-kicker) { font-size: 15px; }.simple-hero-actions { flex-direction: column; align-items: stretch; }.sun-button, .paper-button { width: 100%; }
  .simple-stats { justify-content: space-between; gap: 8px; }.simple-stats span { flex-direction: column; align-items: center; gap: 0; font-size: 10px; }
  .simple-hero-visual { min-height: 480px; }.sample-card { width: 230px; }.sample-card:nth-of-type(1) { left: 0; }.sample-card:nth-of-type(2) { right: 0; top: 36%; }.sample-card:nth-of-type(3) { left: 4%; }
  .simple-section { padding: 66px 0; scroll-margin-top: 64px; }.simple-section-head h2 { font-size: 35px; }.simple-section-head > p { font-size: 14px; }
  .simple-journey { grid-template-columns: 1fr; }.simple-journey-card { min-height: 150px; padding-left: 65px; }.simple-journey-card .journey-number { position: absolute; left: 18px; top: 20px; }.simple-journey-card h3 { margin-top: 2px; }
  .simple-module-grid { grid-template-columns: 1fr; }.simple-module-card.featured { grid-column: auto; }.simple-module-card { min-height: 250px; }
  .simple-rule-head { align-items: stretch; }.simple-rule-count { align-self: flex-start; }.simple-rule-tools { padding: 12px; }.simple-search input { font-size: 16px; }.simple-filter-chip { min-height: 42px; }
  .simple-rule-list { grid-template-columns: 1fr; }.simple-rule-card { min-height: 0; }.simple-rule-card footer { align-items: stretch; flex-direction: column; }.simple-detail-button { justify-content: center; width: 100%; min-height: 46px; }
  .simple-confusion-grid { grid-template-columns: 1fr; }.simple-confusion-card { min-height: 180px; }.simple-pro-note { grid-template-columns: auto 1fr; }.simple-pro-note button { grid-column: 1 / -1; justify-content: center; }
  .simple-footer .simple-container { align-items: flex-start; flex-direction: column; gap: 8px; }.simple-footer button { width: 100%; }
}