.skip-link{position:absolute;top:-40px;left:0;background:var(--primary);color:#fff;padding:8px 16px;text-decoration:none;font-weight:600;border-radius:0 0 4px;z-index:10001;transition:top .2s ease}.skip-link:focus{top:0;outline:3px solid var(--primary-dark);outline-offset:2px}body{display:flex;min-height:100vh;margin:0;padding:0}.sidebar{width:280px;background:var(--bg-secondary);border-right:1px solid var(--border-color);position:fixed;height:100vh;overflow-y:auto;padding:30px 0;z-index:100;transition:all .3s ease;will-change:transform;contain:layout style paint}.sidebar-header{padding:0 20px 20px;border-bottom:2px solid var(--border-color);margin-bottom:20px}.sidebar-header h1{font-size:1.3rem;color:var(--text-primary);margin-bottom:12px;font-weight:700}.sidebar-header .back-home{display:inline-flex;align-items:center;gap:6px;color:var(--primary);text-decoration:none;font-size:.9rem;font-weight:600;padding:8px 12px;border-radius:var(--radius-md);transition:all var(--transition-base);background:var(--primary-light)}.sidebar-header .back-home:hover{background:var(--primary);color:#fff;transform:translate(-3px)}.sidebar-nav{padding:0 10px}.nav-section{margin-bottom:25px}.nav-section h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);padding:0 10px 8px;margin-bottom:8px;font-weight:700;border-bottom:1px solid var(--border-color)}.nav-item{display:block;padding:10px 12px;color:var(--text-primary);text-decoration:none;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;transition:all var(--transition-base);margin-bottom:4px;position:relative}.nav-item:hover{background:var(--primary-light);color:var(--primary);transform:translate(4px)}.nav-item:focus{outline:2px solid var(--primary);outline-offset:2px}.nav-item:focus-visible{outline:3px solid var(--primary);outline-offset:2px;box-shadow:0 0 0 4px var(--primary-light)}.nav-item.active{background:var(--primary);color:#fff;font-weight:600}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.main-content{flex:1;margin-left:280px;padding:40px;max-width:1400px;transition:margin-left .3s ease}.demo-page{max-width:1000px}.demo-page>h1{font-size:2.5rem;color:var(--text-primary);margin-bottom:12px;font-weight:800;line-height:1.2}.demo-page .subtitle{font-size:1.2rem;color:var(--text-secondary);margin-bottom:40px;font-weight:400}.concept-section{background:var(--primary-light);border-left:4px solid var(--primary);padding:25px;border-radius:var(--radius-lg);margin:30px 0}.concept-section h2{color:var(--primary-dark);font-size:1.5rem;margin-bottom:15px;font-weight:700}.concept-section p{color:var(--text-primary);line-height:1.8;margin-bottom:12px}.concept-section ul{margin-left:20px;color:var(--text-primary);line-height:1.8}.concept-section li{margin-bottom:8px}.syntax-section{margin:40px 0}.syntax-section h2{color:var(--text-primary);font-size:1.8rem;margin-bottom:20px;font-weight:700;padding-bottom:10px;border-bottom:2px solid var(--border-color)}.syntax-section pre{background:var(--gray-800);color:var(--gray-200);padding:20px;border-radius:var(--radius-lg);overflow-x:auto;font-family:var(--font-mono);font-size:.95rem;line-height:1.6;border:1px solid var(--gray-700);margin:15px 0}.syntax-section code{font-family:var(--font-mono)}.demo-section{margin:50px 0;content-visibility:auto;contain-intrinsic-size:800px}.demo-section h2{color:var(--text-primary);font-size:1.8rem;margin-bottom:20px;font-weight:700;padding-bottom:10px;border-bottom:2px solid var(--border-color)}.demo-section h3{color:var(--text-primary);font-size:1.3rem;margin:30px 0 15px;font-weight:600}.demo-container{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:25px 0;align-items:start;contain:layout style}.demo-preview{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:30px;min-height:250px;display:flex;flex-direction:column;gap:15px}.demo-preview-title{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:10px}.demo-code{position:relative}.demo-code pre{background:var(--gray-800);color:var(--gray-200);padding:20px;border-radius:var(--radius-lg);overflow-x:auto;font-family:var(--font-mono);font-size:.9rem;line-height:1.6;border:1px solid var(--gray-700);margin:0}.demo-code code{font-family:var(--font-mono)}.code-comment{color:var(--gray-400);font-style:italic}.demo-container.single-column{grid-template-columns:1fr}.compatibility-section{margin:50px 0;padding:30px;background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.compatibility-section h2{color:var(--text-primary);font-size:1.8rem;margin-bottom:20px;font-weight:700}.compatibility-table{width:100%;border-collapse:collapse;margin-top:20px}.compatibility-table th,.compatibility-table td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--border-color)}.compatibility-table th{background:var(--primary-light);color:var(--primary-dark);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}.compatibility-table td{color:var(--text-primary);font-size:.95rem}.compatibility-table tr:hover{background:var(--primary-light)}.support-yes{color:var(--success);font-weight:600}.support-no{color:var(--error);font-weight:600}.support-partial{color:var(--warning);font-weight:600}.interactive-demo{background:var(--card-bg);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:25px;margin:25px 0}.interactive-demo h3{color:var(--text-primary);font-size:1.2rem;margin-bottom:15px;font-weight:600}.controls{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-size:.9rem;font-weight:600;color:var(--text-primary);cursor:pointer}.control-group input,.control-group select{padding:8px 12px;border:2px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-primary);color:var(--text-primary);font-size:.9rem;font-family:var(--font-mono);transition:all var(--transition-base)}.control-group input:focus,.control-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.control-group input:focus-visible,.control-group select:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light)}.control-group input:invalid{border-color:var(--error)}.control-group input:invalid:focus{box-shadow:0 0 0 3px var(--error-light)}.result-display{background:var(--bg-secondary);border:2px dashed var(--border-color);border-radius:var(--radius-lg);padding:20px;min-height:150px;font-family:var(--font-mono);font-size:.9rem;color:var(--text-primary)}@media (max-width: 1024px){.demo-container{grid-template-columns:1fr;gap:20px}.main-content{padding:30px}}@media (max-width: 768px){body{flex-direction:column}.sidebar{display:none}.main-content{margin-left:0;padding:20px}.demo-page>h1{font-size:2rem}.demo-page .subtitle{font-size:1rem}.concept-section,.syntax-section,.demo-section{margin:25px 0}.concept-section h2,.syntax-section h2,.demo-section h2{font-size:1.5rem}.demo-preview{padding:20px;min-height:200px}.compatibility-section{padding:20px;overflow-x:auto}.compatibility-table{font-size:.85rem}.compatibility-table th,.compatibility-table td{padding:10px}.nav-item,button,.btn,a.card{min-height:44px;min-width:44px;display:flex;align-items:center}}@media (max-width: 480px){.main-content{padding:15px}.demo-page>h1{font-size:1.75rem}.concept-section,.interactive-demo{padding:15px}.controls{flex-direction:column}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.sidebar,.nav-item,.card,.demo-container{transition:none!important}}@media (prefers-contrast: more){:root{--border-color: #000000}.nav-item:focus,.control-group input:focus,.control-group select:focus{outline:3px solid currentColor;outline-offset:3px}.card{border-width:3px}}@media print{.sidebar,.theme-toolbar,.back-to-top{display:none}.main-content{margin-left:0;max-width:100%}.demo-page{max-width:100%}}@supports not selector(:has(*)){.demo-section{position:relative;padding-top:60px}.demo-section:before{content:"⚠️ 您的浏览器不支持 :has() 选择器，部分演示效果可能无法正常显示";position:absolute;top:0;left:0;right:0;padding:12px 15px;background:var(--warning-light);color:var(--warning-dark);border:2px solid var(--warning);border-radius:var(--radius-md);font-weight:600;font-size:.9rem;text-align:center}body[data-demo=has-basics] .demo-section:before,body[data-demo=has-practical] .demo-section:before{content:"⚠️ 此页面的核心功能需要 :has() 支持，建议使用最新版 Chrome、Firefox、Safari 或 Edge";background:var(--error-light);color:var(--error-dark);border-color:var(--error)}}@supports not selector(:is(div,span)){.demo-section[data-selector=is]:after{content:"ℹ️ 您的浏览器不支持 :is()，但可以使用传统的逗号分隔选择器替代";display:block;margin-top:15px;padding:10px;background:var(--info-light);color:var(--info-dark);border-left:4px solid var(--info);border-radius:4px;font-size:.85rem}}@supports not selector(:where(div,span)){.demo-section[data-selector=where]:after{content:"ℹ️ 您的浏览器不支持 :where()，可以使用 :is() 或传统选择器替代";display:block;margin-top:15px;padding:10px;background:var(--info-light);color:var(--info-dark);border-left:4px solid var(--info);border-radius:4px;font-size:.85rem}}@supports not selector(:focus-within){.demo-section[data-selector=focus-within]:after{content:"ℹ️ 您的浏览器不支持 :focus-within，需要使用 JavaScript 监听 focus 事件实现类似功能";display:block;margin-top:15px;padding:10px;background:var(--warning-light);color:var(--warning-dark);border-left:4px solid var(--warning);border-radius:4px;font-size:.85rem}}@supports not selector(:focus-visible){.demo-section[data-selector=focus-visible]:after{content:"ℹ️ 您的浏览器不支持 :focus-visible，将使用 :focus 作为降级方案";display:block;margin-top:15px;padding:10px;background:var(--warning-light);color:var(--warning-dark);border-left:4px solid var(--warning);border-radius:4px;font-size:.85rem}*:focus-visible{outline:2px solid var(--primary);outline-offset:2px}}@supports not (display: grid){.demo-container{display:block}.demo-preview,.demo-code{margin-bottom:20px}}@supports not (--css: variables){body{background:#fff;color:#111827}.sidebar{background:#f9fafb;border-right:1px solid #e5e7eb}.nav-item.active{background:#10b981;color:#fff}}.no-has-support .demo-preview{opacity:.7;position:relative}.no-has-support .demo-preview:after{content:"此演示需要 :has() 支持";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;color:#fff;padding:10px 20px;border-radius:8px;font-weight:600;white-space:nowrap;z-index:10}.polyfill-notice{background:var(--info-light);border:2px solid var(--info);border-radius:var(--radius-lg);padding:20px;margin:30px 0}.polyfill-notice h3{color:var(--info-dark);margin-top:0;font-size:1.2rem}.polyfill-notice p{color:var(--text-primary);line-height:1.6;margin-bottom:10px}.polyfill-notice code{background:var(--gray-700);color:var(--gray-200);padding:2px 6px;border-radius:3px;font-family:var(--font-mono);font-size:.9rem}.polyfill-notice a{color:var(--primary);font-weight:600;text-decoration:none}.polyfill-notice a:hover{text-decoration:underline}