/* 专家风格 v1.0（WWW-170 · portal-expert-style-spec.md · 取代 v2 紫色调 · 扁平无阴影无 JS）
   定位：高端技术专家的个人门户 —— 暖灰 + 琥珀点缀 + mono 工程细节；
   与博客 v3.1（冷灰 + 青绿）区隔。明/暗仅靠 prefers-color-scheme，CSP script-src 'none' 不变。 */

:root{color-scheme:light;--font-sans:"PingFang SC","Hiragino Sans GB","HarmonyOS Sans SC","Microsoft YaHei","Microsoft YaHei UI","Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,"JetBrains Mono","Cascadia Code","SF Mono",Consolas,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Microsoft YaHei UI","Noto Sans SC",monospace;--page-bg:#FAFAF9;--surface:#FFFFFF;--surface-2:#F5F5F4;--ink:#292524;--ink-title:#1C1917;--muted:#6B6660;--accent:#B45309;--on-accent:#FFFFFF;--accent-soft:#F5EDE3;--accent-text:#92400E;--border:#E7E5E4;--border-strong:#D6D3D1;--success:#15803D;--warn:#A16207;--ring:#B45309;--radius-card:14px;--radius-icon:10px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--page-bg:#0A0A0B;--surface:#141416;--surface-2:#1B1B1F;--ink:#D4D4D8;--ink-title:#FAFAFA;--muted:#A1A1AA;--accent:#FBBF24;--on-accent:#1C1917;--accent-soft:#2A2110;--accent-text:#FCD34D;--border:#26262B;--border-strong:#3F3F46;--success:#4ADE80;--warn:#FBBF24;--ring:#FBBF24}}
*{box-sizing:border-box}
html{background:var(--page-bg);scroll-behavior:smooth}
body{margin:0;background:var(--page-bg);color:var(--ink);font:16px/1.75 var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100dvh}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-soft);color:var(--accent-text)}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:4px}
.muted{color:var(--muted)}
.wrap{max-width:880px;margin:0 auto;padding:0 var(--sp-6)}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 16px;border-bottom:1px solid var(--border)}
.masthead-brand{display:inline-flex;align-items:center;gap:10px}
.wordmark{font:600 15px/1 var(--font-mono);color:var(--ink-title);letter-spacing:.02em}
.wordmark::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;background:var(--accent);border-radius:2px;vertical-align:2px}
.env-badge{font:700 12px/1 var(--font-mono);color:var(--on-accent);background:var(--warn);border-radius:999px;padding:3px 10px}
.hero{padding:var(--sp-12) 0 var(--sp-8)}
.hero-eyebrow{margin:0;font:500 12px/1 var(--font-mono);letter-spacing:.16em;color:var(--accent-text)}
.hero-title{margin:14px 0 0;font-size:clamp(34px,4.5vw + 12px,54px);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:var(--ink-title)}
.hero-role{margin:14px 0 0;font-size:16px;color:var(--ink)}
.hero-role b{font-weight:600;color:var(--ink-title)}
.hero-tagline{margin:6px 0 0;font-size:15px;color:var(--muted)}
.section-label{display:flex;align-items:center;gap:12px;margin:0 0 var(--sp-4);font:500 12px/1 var(--font-mono);letter-spacing:.05em;color:var(--muted)}
.section-label::after{content:"";flex:1;height:1px;background:var(--border)}
.module-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card)}
.module{display:flex;align-items:flex-start;gap:var(--sp-4);padding:20px}
@media (prefers-reduced-motion:no-preference){.module{transition:border-color .15s,background .15s}.module:hover{border-color:var(--border-strong);background:var(--surface-2)}.module:hover .module-title{color:var(--accent-text)}.module:hover .module-host{color:var(--accent-text)}.module .module-arrow{transition:transform .15s,color .15s}.module:hover .module-arrow{transform:translateX(4px);color:var(--accent-text)}}
.module-index{flex:0 0 auto;font:600 13px/20px var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.module-icon{flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-icon);background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center}
.module-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.module-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.module-title{font-size:17px;font-weight:700;color:var(--ink-title)}
.badge{font-size:12px;line-height:18px;border-radius:999px;padding:1px 9px;white-space:nowrap;font-weight:500}
.badge-online{color:var(--success);background:var(--surface-2);background:color-mix(in srgb,var(--success) 12%,transparent)}
.badge-building{color:var(--warn);background:var(--surface-2);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.module-desc{font-size:14px;line-height:22px;color:var(--muted)}
.module-host{display:inline-flex;align-items:center;gap:5px;font:500 13px/20px var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.module-host svg{opacity:1}
.module-arrow{flex:0 0 auto;align-self:center;color:var(--muted)}
.timeline-card{margin-top:var(--sp-12);padding:22px 24px}
.timeline-title{margin:0 0 var(--sp-4);font-size:15px;font-weight:700;color:var(--ink-title)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.timeline-item{display:flex;gap:var(--sp-4);align-items:flex-start}
.timeline-date{flex:0 0 92px;font:500 13px/22px var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.timeline-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.timeline-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.timeline-site{font-weight:600;color:var(--ink)}
.timeline-ref{font:500 12px/18px var(--font-mono);color:var(--accent-text);background:var(--accent-soft);border-radius:6px;padding:1px 6px}
.timeline-text{font-size:14px;line-height:22px;color:var(--muted)}
.site-footer{margin-top:var(--sp-16);padding:var(--sp-6) 0 40px;border-top:1px solid var(--border)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.footer-beian{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:var(--sp-3);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.footer-beian a:hover{text-decoration:underline}
.footer-note{margin:var(--sp-4) 0 0;font:500 12px/20px var(--font-mono);letter-spacing:.04em;color:var(--muted)}
.empty-card{max-width:420px;margin:64px auto;padding:48px 32px;text-align:center}
.error-code{font-size:44px;font-weight:800;color:var(--ink-title);margin:0 0 8px}
.btn{display:inline-block;margin-top:16px;background:var(--accent);color:var(--on-accent);border-radius:var(--radius-icon);padding:10px 20px;font-size:14px;font-weight:600}
@media (max-width:639px){
  .wrap{padding:0 var(--sp-4)}
  .hero{padding:var(--sp-8) 0 var(--sp-6)}
  .module{padding:16px;gap:12px}
  .module-index{display:none}
  .module-icon{width:40px;height:40px}
  .module-arrow{display:none}
  .timeline-card{padding:18px 16px}
  .timeline-item{flex-direction:column;gap:4px}
  .timeline-date{flex-basis:auto}
  .site-footer{margin-top:var(--sp-12)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}