:root{--ink: #111827;--muted: #6b7280;--soft: #9ca3af;--line: #e5e7eb;--line-strong: #d1d5db;--bg: #ffffff;--alt: #fafafa;--tag: #f3f4f6;--green: #10b981;--green-ink: #065f46;--green-bg: #ecfdf5;--blue: #3b82f6;--blue-ink: #1e40af;--blue-bg: #eff6ff;--gray-ink: #4b5563;--gray-bg: #f3f4f6}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,system-ui,sans-serif;letter-spacing:0}.topbar{position:sticky;top:0;z-index:10;height:64px;border-bottom:1px solid #f3f4f6;background:#ffffffeb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.nav-inner{max-width:1200px;height:64px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:32px}.logo{display:inline-flex;align-items:center;gap:9px;font-size:22px;font-weight:680;line-height:1;white-space:nowrap;letter-spacing:0}.logo-mark{object-fit:contain;background-size:contain;background-repeat:no-repeat;background-position:center;flex:0 0 auto}.hero-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;color:var(--muted);font-size:15px;font-weight:550}.nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:500}.nav a{position:relative;color:var(--soft);text-decoration:none;cursor:default;padding:22px 0 20px}.nav a.active{color:var(--ink)}.nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);border-radius:2px}.hero{background:linear-gradient(180deg,#fff,#fafafa);padding:104px 24px 80px}.hero-inner,.section,.footer-inner{max-width:1200px;margin:0 auto}.eyebrow{margin:0 0 18px;color:var(--muted);font-size:15px;font-weight:500}h1{margin:0;font-size:56px;line-height:1.05;font-weight:650}.hero h2{margin:18px 0 0;font-size:24px;line-height:1.35;font-weight:550}.vision{margin:18px 0 0;color:var(--muted);font-size:15px;font-style:italic;line-height:1.6}.section{padding:64px 24px 96px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.section-head h3{margin:0;font-size:24px;font-weight:650}.section-head p{margin:0;color:var(--muted);font-size:14px}.filters{margin:0 0 24px;display:flex;flex-wrap:wrap;gap:10px 24px}.filters button{position:relative;padding:0 0 7px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:500;cursor:pointer}.filters button:after{content:"";position:absolute;right:0;bottom:0;left:0;height:1px;background:transparent}.filters button:hover,.filters button.active{color:var(--ink)}.filters button.active{font-weight:650}.filters button.active:after{background:var(--ink)}.filters button:focus-visible,.detail-back:focus-visible{outline:2px solid var(--blue);outline-offset:4px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.card{min-height:304px;padding:24px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;flex-direction:column;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.card:hover{border-color:var(--line-strong);box-shadow:0 4px 12px #0000000f;transform:translateY(-2px)}.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:28px}.badge{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}.badge span{width:6px;height:6px;border-radius:50%;background:currentColor}.badge.online{color:var(--green-ink);background:var(--green-bg)}.badge.demo{color:var(--blue-ink);background:var(--blue-bg)}.badge.development{color:var(--gray-ink);background:var(--gray-bg)}.badge.online span{background:var(--green)}.badge.demo span{background:var(--blue)}.badge.development span{background:var(--soft)}.type{color:var(--muted);font-size:13px;font-weight:500}.card h4{margin:0;font-size:21px;line-height:1.35;font-weight:650}.subtitle{margin:8px 0 0;color:var(--muted);font-size:14px;font-weight:500}.desc{margin:18px 0 0;color:#374151;font-size:14px;line-height:1.75;max-width:44rem}.tags{margin:24px 0;display:flex;flex-wrap:wrap;gap:8px}.tag{display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:6px;background:var(--tag);color:var(--muted);font-size:12px;font-weight:550}.card-foot{margin-top:auto;padding-top:18px;border-top:1px solid #f3f4f6;display:flex;justify-content:flex-end}.cta{color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:color .15s ease}.cta .arrow{display:inline-block;transition:transform .15s ease}.cta:hover{color:var(--blue)}.cta:hover .arrow{transform:translate(4px)}.cta.disabled{color:var(--soft);pointer-events:none}.detail-page{min-height:calc(100vh - 211px);padding:96px 24px;background:linear-gradient(180deg,#fff,#fafafa)}.detail-inner{max-width:760px;margin:0 auto}.detail-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.detail-type{margin:0;color:var(--muted);font-size:13px;font-weight:500}.detail-inner h1{font-size:40px;line-height:1.2}.detail-subtitle{margin:12px 0 0;color:var(--muted);font-size:17px;font-weight:500}.detail-description{margin:28px 0 0;color:#374151;font-size:15px;line-height:1.8}.detail-status{margin:32px 0 0;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}.detail-back{display:inline-block;margin-top:40px;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none}footer{border-top:1px solid #f3f4f6;background:var(--alt);padding:36px 24px}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--muted);font-size:14px;line-height:1.7}.footer-brand{color:var(--ink);font-weight:650;font-size:16px}.hamburger{display:none;width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:20px;line-height:1}@media(max-width:767px){.nav{display:none}.hamburger{display:inline-flex;align-items:center;justify-content:center}.hero{padding:72px 20px 48px}h1{font-size:36px}.hero h2{font-size:20px}.section{padding:48px 20px 64px}.section-head{display:block}.section-head p{margin-top:8px}.grid{grid-template-columns:1fr;gap:16px}.filters{gap:10px 20px}.detail-page{padding:64px 20px}.detail-inner h1{font-size:32px}.card{min-height:auto;padding:20px}.card-top{margin-bottom:20px}.footer-inner{display:block;text-align:center}.footer-inner>div+div{margin-top:12px}}