:root { --ink:#17232b; --muted:#71808a; --line:#dce5e9; --canvas:#f6f8f9; --panel:#fff; --accent:#126b8d; --soft:#eaf4f7; --dark:#0c4d68; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font:14px/1.65 "Microsoft YaHei","PingFang SC",sans-serif; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button { cursor:pointer; }
.topbar { background:#fff; border-bottom:1px solid var(--line); }
.topbar-inner { width:min(1240px,calc(100% - 40px)); min-height:72px; margin:auto; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { width:35px; height:35px; display:grid; place-items:center; border-radius:6px; background:var(--accent); color:#fff; font-size:20px; font-weight:900; }
.brand strong { display:block; }
.brand small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
nav { display:flex; gap:22px; margin-left:auto; color:var(--muted); font-size:13px; }
nav a:hover { color:var(--dark); }
.page { width:min(1240px,calc(100% - 40px)); margin:auto; padding:52px 0 84px; }
.hero { max-width:760px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; }
h1 { margin:8px 0 8px; font-size:clamp(31px,5vw,48px); line-height:1.15; }
.hero p { margin:0; color:var(--muted); }
.search { width:min(520px,100%); height:46px; display:flex; align-items:center; gap:9px; margin-top:22px; padding:0 13px; background:#fff; border:1px solid var(--line); border-radius:6px; }
.search span { color:var(--accent); font-size:22px; }
.search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); }
.catalog { display:grid; gap:12px; margin:36px 0 28px; }
.catalog-level { padding:15px 16px; background:#fff; border:1px solid var(--line); border-radius:6px; }
.catalog-label { margin-bottom:10px; color:var(--dark); font-size:12px; font-weight:800; }
.catalog-buttons { display:flex; flex-wrap:wrap; gap:9px; }
.catalog-button { min-height:38px; padding:0 13px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--muted); }
.catalog-button:hover,.catalog-button.active { border-color:var(--accent); background:var(--soft); color:var(--dark); font-weight:800; }
.catalog-button.expected { border-style:dashed; color:#8a5a17; background:#fffaf0; }
.catalog-hint { color:var(--muted); font-size:13px; }
.demo-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.demo-card { overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:6px; }
.demo-cover { aspect-ratio:16/9; display:grid; place-items:center; background:linear-gradient(135deg,#dceef3,#eef4f5); color:var(--accent); }
.demo-cover img { width:100%; height:100%; object-fit:cover; }
.demo-cover-icon { font-size:42px; }
.demo-body { padding:18px; }
.demo-kicker { margin:0 0 5px; color:var(--accent); font-size:11px; font-weight:800; }
.demo-body h2 { margin:0 0 8px; font-size:19px; }
.demo-desc { min-height:45px; margin:0 0 15px; color:var(--muted); font-size:13px; }
.demo-action { width:100%; min-height:40px; display:grid; place-items:center; border:0; border-radius:5px; background:var(--accent); color:#fff; font-weight:800; }
.demo-action.external { background:#eef3f6; color:var(--dark); }
.empty { grid-column:1/-1; padding:55px 20px; text-align:center; color:var(--muted); background:#fff; border:1px solid var(--line); }
.viewer.hidden { display:none; }
.viewer { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; }
.viewer-backdrop { position:absolute; inset:0; background:rgba(12,28,36,.7); }
.viewer-panel { position:relative; width:min(900px,100%); padding:24px; background:#fff; border-radius:6px; box-shadow:0 24px 70px rgba(0,0,0,.25); }
.viewer-panel h2 { margin:0 35px 4px 0; }
.viewer-panel p { margin:0 0 16px; color:var(--muted); font-size:13px; }
.viewer-panel video { display:block; width:100%; max-height:70vh; background:#071318; }
.viewer-close { position:absolute; top:12px; right:14px; border:0; background:transparent; color:var(--muted); font-size:27px; line-height:1; }
@media (max-width:620px) { .topbar-inner { width:calc(100% - 28px); min-height:64px; } nav { gap:12px; font-size:12px; } .brand small { display:none; } .page { width:calc(100% - 28px); padding-top:34px; } }