:root{--primary:#16324f;--primary-light:#e8eef4;--text-main:#2f3a45;--text-secondary:#5b6b7a;--border:#d8e0e8;--bg-page:#f3f5f7;--bg-card:#fff;--accent:#a9782b;--success:#2f6b57;--warning:#b07a24;--danger:#a63b32;--shadow-sm:0 2px 8px #0000000d;--shadow-md:0 4px 16px #0000001a;--shadow-drawer:-4px 0 24px #00000026;font-family:Source Han Sans SC,Noto Sans SC,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif}html{scroll-behavior:smooth}body{color:var(--text-main);background:#fff;margin:0;font-size:14px;line-height:1.5}.site-layout{min-height:100vh}.site-header{color:#fff;letter-spacing:1px;z-index:50;align-items:center;padding:0 24px;font-size:18px;font-weight:600;display:flex;position:sticky;top:0}.site-sider{border-right:1px solid var(--border);height:calc(100vh - 48px);position:sticky;top:48px;left:0;overflow:auto;background:#fff!important}.site-content{background:#fff;max-width:1000px;padding:40px 64px}h1{color:var(--primary);margin-bottom:24px;font-size:32px;font-weight:600}h2{border-bottom:1px solid var(--border);color:var(--text-main);margin:40px 0 16px;padding-bottom:8px;font-size:24px;font-weight:600}h3{margin:24px 0 16px;font-size:18px}p{color:var(--text-secondary);margin-bottom:16px;line-height:1.8}.color-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;margin-bottom:32px;display:grid}.color-box{box-shadow:var(--shadow-sm);border:1px solid var(--border);border-radius:6px;overflow:hidden}.color-box-swatch{color:#fff;align-items:flex-end;height:80px;padding:12px;font-weight:600;display:flex}.color-box-light .color-box-swatch{color:var(--text-main)}.color-box-info{background:#fff;padding:12px}.color-box-name{margin-bottom:4px;font-size:14px;font-weight:500}.color-box-var{color:var(--text-secondary);font-family:monospace;font-size:12px}.preview-container{border:1px solid var(--border);background:var(--bg-page);border-radius:8px;margin:16px 0 32px;padding:32px}.status-tag{border:1px solid;border-radius:4px;align-items:center;padding:2px 8px;font-size:12px;font-weight:500;display:inline-flex}.status-tag-success{color:var(--success);background:#e8f4ef;border-color:#c3e2d5}.status-tag-warning{color:var(--warning);background:#fdf3e1;border-color:#f6e2bc}.status-tag-danger{color:var(--danger);background:#fceceb;border-color:#f3cdca}.status-tag-normal{color:var(--text-secondary);border-color:var(--border);background:var(--bg-page)}.proto-card{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:8px;padding:20px}.proto-card-header{color:var(--primary);border-bottom:1px solid var(--border);margin-bottom:16px;padding-bottom:12px;font-size:16px;font-weight:600}.section-nav{position:sticky;top:72px}.section-nav ul{margin:0;padding:0;list-style:none}.section-nav li{margin-bottom:4px}.section-nav-link{width:100%;color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:4px;align-items:center;padding:10px 16px;text-decoration:none;display:flex}.section-nav li.active .section-nav-link,.section-nav-link:hover,.section-nav-link:focus-visible{background:var(--primary-light);color:var(--primary)}