:root{color-scheme:dark;--page:#0b0c0e;--surface:#14161a;--preview:#0e0f13;--line:#303239;--text:#f3f4f6;--muted:#a2a6af;--pill:#ededee;--pill-text:#17181b;--dialog:#111318;--subtle:#1b1e24}
:root[data-theme=light]{color-scheme:light;--page:#fafafa;--surface:#f0f1f3;--preview:#f7f7f8;--line:#dcdde1;--text:#202124;--muted:#666b74;--pill:#24262b;--pill-text:#fff;--dialog:#fff;--subtle:#f0f1f3}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--text);font-family:"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.65}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #7197ff;outline-offset:4px}svg{width:18px;height:18px;flex:none;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}
.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1176px)/2));gap:20px}.brand-link{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:650}.brand-mark{width:24px;height:24px}.brand-mark img{width:24px;height:24px}.theme-switch{position:relative;width:60px;height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;border:0;border-radius:999px;background:#353942;color:#c3c6cf;flex:none}.theme-switch svg{width:14px;height:14px;position:relative;z-index:1}.theme-switch::before{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#f0f1f4;transition:transform .2s ease}.theme-switch[aria-checked=true]::before{transform:translateX(28px)}.theme-switch[aria-checked=false] .sun{color:#24272e}.theme-switch[aria-checked=true] .moon{color:#24272e}
main{max-width:1240px;margin:auto;padding:36px 32px 70px}.page-intro{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-bottom:28px}h1{font-size:36px;font-weight:600;line-height:1.25;letter-spacing:-.035em;margin:0}h2,h3,p{margin-top:0}.search{display:flex;align-items:center;gap:10px;border:0;border-radius:10px;padding:11px 14px;width:245px;background:var(--surface)}.search input{background:none;color:var(--text);border:0;outline:0;width:100%;min-width:0}.search svg{color:var(--muted)}
.categories{display:flex;width:max-content;max-width:100%;gap:4px;padding:5px;border-radius:999px;background:var(--surface);flex-wrap:wrap;margin:0 0 32px}.categories button{border:0;background:none;color:var(--muted);padding:9px 15px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}.categories button:hover{color:var(--text)}.categories button[aria-pressed=true]{background:var(--pill);color:var(--pill-text)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.component-card{min-width:0;border-radius:19px;overflow:hidden;background:var(--surface);transition:transform .18s,background .18s}.component-card:hover{transform:translateY(-2px)}.card-preview{height:282px;position:relative;display:flex;align-items:center;justify-content:center;background:var(--preview)}.card-preview iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}.preview-link{position:absolute;inset:0;z-index:2;background:transparent;border:0;border-radius:19px}.preview-link:focus-visible{outline-offset:-5px}.card-content{padding:20px 22px 22px}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.card-heading h2{margin:0;font-size:15px;font-weight:600;line-height:1.55}.card-heading button{padding:0;border:0;background:none;text-align:left;color:inherit;font:inherit}.card-arrow{color:var(--muted);margin-top:3px}.card-description{font-size:12px;color:var(--muted);line-height:1.75;margin:0}.card-preview .icon-preview{width:80px;height:80px;object-fit:contain}.icons-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.rights-card .card-preview{height:108px;background:transparent}.rights-card .card-content{padding:5px 9px 14px;text-align:center}.rights-card .card-heading{display:block;margin:0}.rights-card h2{font-size:12px}.rights-card .card-heading button{text-align:center}.rights-card .card-description,.rights-card .card-arrow{display:none}
.line-icons-grid{grid-template-columns:repeat(10,minmax(0,1fr));column-gap:14px;row-gap:22px}.line-icon{min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;border:0;border-radius:10px;padding:16px 4px 9px;background:transparent;color:var(--muted)}.line-icon:hover{background:var(--surface);color:var(--text)}.line-icon img{width:24px;height:24px;object-fit:contain}.line-icon span{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:10px}.line-icon-preview{filter:invert(1)}:root[data-theme=light] .line-icon-preview{filter:none}.pending-preview{color:var(--muted);font-size:14px}.pending-card{opacity:.7}.pending-card .card-preview{background:var(--surface)}.empty{padding:60px 16px;text-align:center;color:var(--muted)}
body.dialog-open{overflow:hidden}.component-dialog{width:min(1120px,calc(100vw - 48px));height:min(840px,calc(100dvh - 48px));max-width:none;max-height:none;overflow:hidden;margin:auto;padding:0;border:0;border-radius:18px;background:var(--dialog);color:var(--text);box-shadow:0 24px 80px #0005}.component-dialog::backdrop{background:#18181b55;backdrop-filter:blur(2px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px;padding:20px 28px 16px}.dialog-head h2{margin:0;font-size:19px;font-weight:600}.dialog-close{border:0;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:transparent;color:var(--muted);flex:none}.dialog-close:hover{background:var(--subtle)}.dialog-body{height:calc(100% - 82px);overflow:auto;padding:0 28px 32px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.detail-description{font-size:13px;color:var(--muted);margin:0 0 20px}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 0 16px}.detail-actions{display:flex;align-items:center;gap:10px}.tabs{display:flex;gap:3px;padding:4px;border-radius:9px;background:var(--subtle)}.tabs button{border:0;padding:7px 14px;border-radius:6px;background:none;color:var(--muted);font-size:12px}.tabs button[aria-selected=true]{background:var(--pill);color:var(--pill-text)}.action{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;background:var(--subtle);color:var(--text);padding:9px 13px;font-size:12px}.action:hover{opacity:.8}.detail-preview{height:440px;display:flex;align-items:center;justify-content:center;border-radius:13px;overflow:hidden;background:var(--preview)}.detail-preview iframe{width:100%;height:100%;border:0}.detail-preview img{object-fit:contain}.code-panel{min-height:220px;margin:0;padding:24px;overflow:auto;border-radius:13px;background:var(--preview);font:12px/1.8 Consolas,monospace;white-space:pre;tab-size:2}.docs-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr);gap:48px;margin-top:30px}.docs-section{margin-bottom:24px}.docs-section h3{font-size:13px;font-weight:600;margin:0 0 13px}.docs-section p{font-size:12px;color:var(--muted);margin-bottom:12px}.spec-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left;overflow-wrap:anywhere}.spec-table th{color:var(--text);font-weight:500;padding:9px 9px}.spec-table td{padding:9px;color:var(--muted);vertical-align:top}.spec-table td:first-child{color:var(--text);font-family:Consolas,monospace}.spec-list{margin:0}.spec-list div{display:flex;justify-content:space-between;gap:15px;padding:8px 0;font-size:12px}.spec-list dt{color:var(--muted)}.spec-list dd{margin:0;text-align:right}.source-links{display:flex;gap:9px;flex-wrap:wrap}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--pill);color:var(--pill-text);border-radius:8px;padding:10px 18px;font-size:12px;z-index:80}
@media(max-width:1050px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.icons-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.line-icons-grid{grid-template-columns:repeat(10,minmax(0,1fr))}.categories button{padding:8px 12px}.docs-grid{gap:24px}}
@media(max-width:650px){.site-header{height:66px;padding:0 20px}main{padding:24px 20px 50px}.page-intro{align-items:flex-start;flex-direction:column;gap:20px}h1{font-size:30px}.search{width:100%}.categories{border-radius:16px;gap:2px}.categories button{padding:8px 10px}.gallery-grid{grid-template-columns:1fr;gap:18px}.icons-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.line-icons-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.card-preview{height:300px}.rights-card .card-preview{height:96px}.component-dialog{width:calc(100vw - 20px);height:calc(100dvh - 20px);border-radius:14px}.dialog-head{padding:16px 18px;min-height:76px}.dialog-body{height:calc(100% - 76px);padding:0 18px 24px}.docs-grid{grid-template-columns:1fr;gap:6px}.preview-toolbar{gap:10px}.detail-actions{gap:6px}.tabs button{padding:7px 10px}.action{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}