@font-face{font-family:SF Pro Rounded;src:url(/assets/font/SF-Pro-Rounded-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:SF Pro Rounded;src:url(/assets/font/SF-Pro-Rounded-Bold.woff2)format("woff2");font-weight:600 800;font-style:normal;font-display:swap}:root{--accent:#9b8afb;--accent-hover:#8672f9;--accent-dark:#6e54f5;--accent-soft:#f0ecfe;--accent-ultra-soft:#f7f4fe;--bg-main:#fcfaff;--bg-header:#fcfaffd9;--bg-container:#f4f0fd;--bg-card:#fff;--bg-card-hover:#fff;--bg-pill:#f2eefd;--bg-pill-hover:#eae4fe;--text-main:#181528;--text-muted:#6b6588;--text-light:#9b95bd;--text-on-accent:#fff;--shadow-sm:0 2px 10px #9b8afb0d;--shadow-md:0 8px 24px #9b8afb14;--shadow-lg:0 16px 40px #9b8afb1f;--font-sans:"SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;--radius-pill:9999px;--radius-card:14px;--radius-modal:20px;--transition-fast:.18s cubic-bezier(.4, 0, .2, 1);--transition-normal:.25s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:0;outline:none;margin:0;padding:0}[hidden]{display:none!important}html,body{width:100%;min-height:100vh;font-family:var(--font-sans);background-color:var(--bg-main);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}html.modal-open,body.modal-open{touch-action:none;height:100vh!important;overflow:hidden!important}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--accent-soft);border-radius:var(--radius-pill)}::-webkit-scrollbar-thumb:hover{background:var(--accent)}a{color:inherit;text-decoration:none}button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit;background:0 0}.site-header{z-index:100;background-color:var(--bg-header);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:100%;transition:all var(--transition-fast);padding:16px 0;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;max-width:1240px;margin:0 auto;padding:0 24px;display:flex}.brand-logo-pill{border-radius:var(--radius-pill);background-color:var(--bg-pill);height:36px;transition:all var(--transition-fast);justify-content:center;align-items:center;padding:0 16px;display:inline-flex}.brand-logo-pill:hover{background-color:var(--bg-pill-hover);transform:translateY(-1px)}.header-wordmark{width:auto;height:18px}.desktop-logo{display:block}.mobile-logo{display:none}.header-actions{align-items:center;gap:8px;display:flex}.pill-btn{border-radius:var(--radius-pill);background-color:var(--bg-pill);height:36px;color:var(--text-main);transition:all var(--transition-fast);white-space:nowrap;justify-content:center;align-items:center;gap:6px;padding:0 16px;font-size:13px;font-weight:600;display:inline-flex}.pill-btn:hover{background-color:var(--bg-pill-hover);transform:translateY(-1px)}.pill-btn:active{transform:translateY(0)}.github-badge-pill{gap:6px;font-weight:600}.btn-primary{background-color:var(--accent)!important;color:#fff!important;font-weight:700!important;box-shadow:0 4px 16px #9b8afb66!important}.btn-primary:hover{background-color:var(--accent-hover)!important;transform:translateY(-2px)!important;box-shadow:0 6px 20px #9b8afb80!important}.btn-secondary{background-color:var(--accent-soft)!important;color:var(--accent-dark)!important;font-weight:700!important}.btn-secondary:hover{background-color:var(--accent)!important;color:#fff!important}.hero-section{text-align:center;max-width:1100px;margin:36px auto 28px;padding:0 20px}.hero-title{letter-spacing:-.02em;color:var(--text-main);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;margin-bottom:12px;font-size:28px;font-weight:800;line-height:1.3;display:flex}.hero-title-text,.hero-by-text{color:var(--text-main)}.hero-brand-wrapper{align-items:center;gap:8px;display:inline-flex}.hero-reicon-brand{background-color:var(--bg-pill);border-radius:var(--radius-pill);vertical-align:middle;transition:all var(--transition-fast);justify-content:center;align-items:center;padding:6px 14px;text-decoration:none;display:inline-flex;transform:translateY(2px)}.hero-reicon-brand:hover{background-color:var(--bg-pill-hover);transform:translateY(0)}.hero-wordmark-img{width:auto;height:22px;display:block}.hero-subtitle{color:var(--text-muted);margin-bottom:32px;font-size:16px}.search-container{width:100%;max-width:620px;margin:0 auto;position:relative}.search-box-pill{background-color:var(--bg-pill);border-radius:var(--radius-pill);height:48px;transition:all var(--transition-fast);align-items:center;gap:12px;padding:0 16px 0 20px;display:flex;position:relative}.search-box-pill:focus-within{background-color:var(--bg-card);box-shadow:0 0 0 3px var(--accent-soft)}.search-svg{color:var(--text-muted);flex-shrink:0}.search-box-pill input{color:var(--text-main);background:0 0;flex:1;width:100%;min-width:0;font-size:14.5px;font-weight:500}.search-box-pill input::placeholder{color:var(--text-light)}.clear-btn{color:var(--text-light);border-radius:var(--radius-pill);flex-shrink:0;padding:3px 6px;font-size:13px}.clear-btn:hover{color:var(--text-main);background-color:var(--accent-soft)}.main-content{max-width:1240px;margin:0 auto 60px;padding:0 24px}.categories-wrapper{scrollbar-width:none;justify-content:center;width:100%;margin-bottom:28px;padding:4px 0 10px;display:flex;overflow-x:auto}.categories-wrapper::-webkit-scrollbar{display:none}.category-chips-list{justify-content:center;align-items:center;gap:8px;width:max-content;margin:0 auto;display:flex}.chip-btn{height:34px;color:var(--text-muted);background-color:var(--bg-pill);border-radius:var(--radius-pill);transition:all var(--transition-fast);white-space:nowrap;justify-content:center;align-items:center;gap:6px;padding:0 16px;font-size:13px;font-weight:500;display:inline-flex}.chip-btn:hover{color:var(--text-main);background-color:var(--bg-pill-hover)}.chip-btn.active{color:#fff;background-color:#12101c;font-weight:600}.chip-btn.active:hover{color:#fff;background-color:#000}.chip-more-btn{border-radius:var(--radius-pill);justify-content:center;align-items:center;width:34px;height:34px;padding:0;display:inline-flex}.chip-btn.active .chip-count{color:#fff;background-color:#ffffff40}.icons-grid-container{transition:all var(--transition-normal);grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px;display:grid}.icon-card-item{background-color:var(--bg-card);cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);-webkit-user-select:none;user-select:none;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;padding:20px 12px 14px;display:flex;position:relative;box-shadow:0 2px 8px #9b8afb0d}.icon-card-item:hover{background-color:var(--bg-card-hover);transform:translateY(-3px);box-shadow:0 8px 20px #9b8afb1f}.icon-svg-wrapper{width:48px;height:48px;color:var(--text-main);transition:transform var(--transition-fast), color var(--transition-fast);justify-content:center;align-items:center;display:flex}.icon-card-item:hover .icon-svg-wrapper{color:var(--accent);transform:scale(1.15)}.icon-svg-wrapper svg{width:32px;height:32px}.icon-card-label{color:var(--text-muted);text-align:center;white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin-top:14px;padding:0 4px;font-size:12px;font-weight:600;overflow:hidden}.icon-card-item:hover .icon-card-label{color:var(--text-main)}.quick-hover-actions{opacity:0;transition:all var(--transition-fast);position:absolute;top:8px;right:8px;transform:translateY(-4px)}.icon-card-item:hover .quick-hover-actions{opacity:1;transform:translateY(0)}@media (pointer:coarse){.quick-hover-actions{display:none!important}}.quick-svg-btn{background-color:var(--accent-soft);color:var(--accent-dark);border-radius:var(--radius-pill);padding:4px 8px;font-size:10px;font-weight:700}.quick-svg-btn:hover{background-color:var(--accent);color:#fff}.empty-results:not([hidden]){text-align:center;background-color:var(--bg-card);border-radius:14px;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:520px;margin:30px auto;padding:48px 24px;display:flex;box-shadow:0 2px 12px #9b8afb0d}.empty-circle{border-radius:var(--radius-pill);background-color:var(--accent-soft);width:64px;height:64px;color:var(--accent);justify-content:center;align-items:center;margin-bottom:16px;display:flex}.empty-results h3{color:var(--text-main);margin-bottom:6px;font-size:20px;font-weight:700}.empty-results p{color:var(--text-muted);max-width:420px;margin-bottom:20px;font-size:14px;line-height:1.5}.modal-backdrop{z-index:2000;-webkit-backdrop-filter:blur(12px);background-color:#14112199;justify-content:center;align-items:center;padding:24px 16px;animation:.25s cubic-bezier(.16,1,.3,1) forwards modalFadeIn;display:flex;position:fixed;inset:0;overflow-y:auto}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-dialog-card{overscroll-behavior:contain;background-color:var(--bg-card);border-radius:24px;width:100%;max-width:860px;max-height:calc(100vh - 48px);padding:28px 32px;position:relative;overflow-y:auto;box-shadow:0 24px 60px #18152840,0 0 0 1px #9b8afb26}.modal-close-btn{background:var(--bg-pill);width:36px;height:36px;color:var(--text-main);cursor:pointer;transition:all var(--transition-fast);z-index:20;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:flex;position:absolute;top:20px;right:20px}.modal-close-btn:hover{background:var(--accent);color:#fff;transform:rotate(90deg)scale(1.08)}.modal-top-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;padding-right:48px;display:flex}.modal-icon-title-group{align-items:center;gap:12px;display:flex}.modal-icon-name{letter-spacing:-.02em;color:var(--text-main);font-size:26px;font-weight:800;line-height:1.2}.modal-cat-badge{color:var(--accent-dark);background:var(--accent-soft);border-radius:var(--radius-pill);text-transform:capitalize;padding:4px 12px;font-size:12px;font-weight:700}.modal-view-mode-tabs{background:var(--bg-pill);border-radius:var(--radius-pill);align-items:center;gap:4px;padding:4px;display:flex}.modal-view-tab{color:var(--text-muted);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;padding:6px 14px;font-size:12.5px;font-weight:700}.modal-view-tab.active{background:var(--bg-card);color:var(--accent-dark);box-shadow:var(--shadow-sm)}.modal-inspector-body{grid-template-columns:320px 1fr;align-items:flex-start;gap:28px;display:grid}.modal-left-stage{flex-direction:column;gap:12px;display:flex}.stage-display-wrapper{width:100%;height:260px;transition:background-color var(--transition-normal);border-radius:20px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px 6px #0000000a}.stage-bg-light{border:1px solid var(--bg-pill);background-color:#fff}.stage-bg-soft{background-color:var(--bg-pill)}.stage-bg-dark{background-color:#181528}.stage-bg-grid{background-color:#f4f3fa;background-image:radial-gradient(#9b8afb40 1px,#0000 0);background-size:16px 16px}.stage-svg-box{transition:transform var(--transition-normal);justify-content:center;align-items:center;display:flex}.stage-bg-bar{background:var(--bg-pill);border-radius:14px;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.stage-bg-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;font-size:11.5px;font-weight:700}.stage-bg-options{gap:4px;display:flex}.stage-bg-btn{color:var(--text-muted);border-radius:var(--radius-pill);cursor:pointer;text-transform:capitalize;transition:all var(--transition-fast);background:0 0;border:none;padding:3px 8px;font-size:11px;font-weight:700}.stage-bg-btn.active{background:var(--accent-dark);color:#fff}.modal-right-customizer{flex-direction:column;gap:20px;display:flex}.customizer-group{background:var(--bg-pill);border-radius:16px;flex-direction:column;gap:8px;padding:14px 18px;display:flex}.customizer-label-row{color:var(--text-main);justify-content:space-between;align-items:center;font-size:13px;font-weight:700;display:flex}.custom-value{font-family:var(--font-mono);color:var(--accent-dark);font-size:12px}.size-control-row{align-items:center;gap:16px;display:flex}.custom-range-slider{accent-color:var(--accent);cursor:pointer;flex:1}.size-preset-pills{gap:4px;display:flex}.size-pill{background:var(--bg-card);color:var(--text-muted);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--transition-fast);border:none;padding:3px 8px;font-size:11px;font-weight:700}.size-pill.active{background:var(--accent-soft);color:var(--accent-dark)}.color-swatches-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.color-swatch-dot{cursor:pointer;width:26px;height:26px;transition:transform var(--transition-fast), box-shadow var(--transition-fast);border:2px solid #0000;border-radius:50%}.color-swatch-dot:hover{transform:scale(1.15)}.color-swatch-dot.active{box-shadow:0 0 0 3px var(--bg-card), 0 0 0 5px var(--accent)}.custom-color-picker-wrapper{border:2px solid var(--bg-card);width:26px;height:26px;box-shadow:0 0 0 1px var(--bg-pill);border-radius:50%;position:relative;overflow:hidden}.native-color-input{cursor:pointer;border:none;width:200%;height:200%;margin:0;padding:0;position:absolute;top:-50%;left:-50%}.code-viewer-container{flex-direction:column;gap:8px;display:flex}.code-format-tabs{gap:6px;display:flex}.format-tab-btn{background:var(--bg-pill);color:var(--text-muted);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--transition-fast);border:none;padding:5px 12px;font-size:12px;font-weight:700}.format-tab-btn.active{background:var(--accent-soft);color:var(--accent-dark)}.code-pre-box{color:#f8f7ff;font-family:var(--font-mono);background:#181528;border-radius:14px;max-height:100px;padding:14px 16px;font-size:12.5px;line-height:1.5;overflow-x:auto}.code-pre-box code{color:#e2deff;white-space:pre-wrap;word-break:break-all}.modal-actions-bar{gap:12px;display:flex}.action-btn-glow{box-shadow:0 6px 20px #6e54f54d}@media (width<=768px){.modal-dialog-card{max-height:90vh;padding:20px}.modal-inspector-body{grid-template-columns:1fr;gap:20px}.stage-display-wrapper{height:180px}}.custom-row{justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:600;display:flex}.custom-row input[type=range]{accent-color:var(--accent);cursor:pointer;height:6px}.color-dots{align-items:center;gap:8px;display:flex}.color-dot{border-radius:var(--radius-pill);cursor:pointer;width:22px;height:22px;transition:transform var(--transition-fast)}.color-dot:hover{transform:scale(1.25)}.color-dot.active{box-shadow:0 0 0 3px var(--bg-card), 0 0 0 5px var(--accent)}#customColorInput{border-radius:var(--radius-pill);cursor:pointer;background:0 0;width:26px;height:26px}.code-viewer{margin-bottom:20px}.code-tabs-list{gap:6px;margin-bottom:8px;display:flex}.format-tab{color:var(--text-muted);border-radius:var(--radius-pill);background-color:var(--bg-pill);padding:5px 14px;font-size:12px;font-weight:700}.format-tab.active{background-color:var(--accent-soft);color:var(--accent-dark)}.code-pre-box{background-color:var(--bg-pill);border-radius:16px;max-height:90px;padding:12px 16px;overflow:auto}.code-pre-box code{font-family:var(--font-mono);color:var(--text-main);word-break:break-all;white-space:pre-wrap;font-size:12px}.modal-cta-row{gap:10px;margin-top:auto;display:flex}.modal-action-btn{flex:1;padding:12px}.toast-wrapper{z-index:9999;opacity:0;pointer-events:none;transition:all var(--transition-normal);max-width:90vw;position:fixed;bottom:28px;left:50%;transform:translate(-50%)translateY(100px)}.toast-wrapper.show{opacity:1;transform:translate(-50%)translateY(0)}.toast-card-pill{background-color:var(--bg-card);color:var(--text-main);border-radius:var(--radius-pill);white-space:nowrap;align-items:center;gap:10px;padding:10px 22px;font-size:13.5px;font-weight:700;display:flex;box-shadow:0 10px 30px #0000002e}@media (width<=768px){.site-header{padding:12px 0}.header-inner{padding:0 16px}.hero-section{margin:24px auto 20px;padding:0 16px}.hero-title{font-size:28px}.hero-subtitle{margin-bottom:24px;font-size:14px}.main-content{margin-bottom:40px;padding:0 16px}.categories-wrapper{justify-content:flex-start}.modal-dialog{border-radius:20px;max-width:100%;padding:22px 18px}.modal-grid-layout{grid-template-columns:1fr;gap:16px}.modal-svg-display{border-radius:16px;height:160px}}@media (width<=640px){.desktop-logo{display:none!important}.mobile-logo{width:auto;height:20px;display:block!important}.brand-logo-pill{height:32px;padding:0 10px}.hero-title{text-align:center;white-space:normal;flex-direction:column;align-items:center;gap:8px;font-size:22px}.hero-brand-wrapper{justify-content:center;align-items:center;gap:8px;display:inline-flex}.hero-reicon-brand{padding:5px 12px;transform:translateY(0)}.hero-wordmark-img{height:18px}.icons-grid-container{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:10px}.icon-card-item,.skeleton-card{padding:16px 8px 12px}.icon-svg-wrapper,.skeleton-icon-placeholder{width:38px;height:38px}.icon-svg-wrapper svg{width:26px;height:26px}.icon-card-label{margin-top:10px;font-size:11px}.skeleton-label-placeholder{height:10px;margin-top:10px}.quick-hover-actions{display:none!important}.modal-backdrop{padding:12px 10px}.modal-dialog{border-radius:18px;max-height:88vh;padding:16px 14px}.modal-grid-layout{gap:10px}.modal-svg-display{border-radius:14px;height:110px}.modal-close-icon{width:30px;height:30px;font-size:13px;top:10px;right:10px}.modal-header-meta{margin-bottom:2px;padding-right:34px}.modal-header-meta h2{font-size:18px}.cat-badge-pill{padding:2px 8px;font-size:11px}.desc-tags-list{gap:4px;margin-bottom:8px}.desc-tag-pill{padding:2px 8px;font-size:11px}.customizer-box{border-radius:12px;gap:8px;margin-bottom:8px;padding:10px 12px}.custom-row{flex-wrap:wrap;gap:4px 10px;font-size:12px}.color-dots{flex-wrap:wrap;gap:6px}.color-dot{width:20px;height:20px}#customColorInput{width:22px;height:22px}.code-viewer{margin-bottom:10px}.code-pre-box{border-radius:10px;max-height:58px;padding:8px 10px;font-size:11px}.modal-cta-row{flex-direction:row;gap:6px}.modal-action-btn{flex:1;height:36px;padding:0 6px;font-size:11.5px;font-weight:700}.toast-wrapper{bottom:20px}.toast-card-pill{gap:8px;padding:9px 16px;font-size:12px}}.hero-feature-pills{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:14px;margin-bottom:24px;display:flex}.agent-tag-pill{background:var(--bg-pill);color:var(--text-main);border-radius:var(--radius-pill);align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:600;display:inline-flex}.detail-page-container{max-width:1160px;margin:0 auto;padding:32px 24px 100px}.detail-top-nav-bar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.detail-nav-left{align-items:center;gap:14px;display:flex}.back-pill-btn{border-radius:var(--radius-pill);background:var(--bg-pill);color:var(--text-main);cursor:pointer;transition:all var(--transition-fast);border:none;align-items:center;gap:6px;padding:5px 12px;font-size:12.5px;font-weight:600;display:inline-flex}.back-pill-btn:hover{background:var(--bg-pill-hover);color:var(--accent-dark)}.breadcrumb-nav{font-family:var(--font-mono);color:var(--text-muted);align-items:center;gap:6px;font-size:13px;display:flex}.breadcrumb-link{cursor:pointer;transition:color var(--transition-fast)}.breadcrumb-link:hover{color:var(--text-main)}.breadcrumb-slash{color:var(--text-muted);opacity:.5}.breadcrumb-current{color:var(--text-main);font-weight:700}.detail-inspector-layout{grid-template-columns:360px 1fr;align-items:flex-start;gap:32px;margin-bottom:56px;display:grid}.detail-preview-column{flex-direction:column;gap:14px;display:flex}.stage-display-box{width:100%;height:280px;transition:background-color var(--transition-normal);box-shadow:var(--shadow-sm);border-radius:20px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.stage-toolbar{background:var(--bg-pill);border-radius:14px;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.toolbar-group{align-items:center;gap:10px;display:flex}.toolbar-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;font-size:11.5px;font-weight:700}.reset-btn{color:var(--text-muted);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;font-size:11.5px;font-weight:700}.reset-btn:hover{color:var(--accent-dark)}.detail-controls-column{flex-direction:column;gap:20px;display:flex}.icon-header-meta{flex-direction:column;gap:8px;display:flex}.icon-main-title{letter-spacing:-.02em;color:var(--text-main);font-size:32px;font-weight:800;line-height:1.15}.customizer-box-panel{background:var(--bg-pill);border-radius:16px;flex-direction:column;gap:14px;padding:16px 20px;display:flex}.customizer-row{flex-direction:column;gap:8px;display:flex}.size-control-wrapper{align-items:center;gap:16px;display:flex}.props-reference-box{margin-top:8px}.props-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;font-size:12px;font-weight:800}.props-table-wrapper{background:var(--bg-card);box-shadow:var(--shadow-sm);border-radius:14px;overflow-x:auto}.props-table{border-collapse:collapse;text-align:left;width:100%;font-size:13px}.props-table th{border-bottom:2px solid var(--bg-pill);color:var(--text-main);padding:10px 14px;font-weight:700}.props-table td{border-bottom:1px solid var(--bg-pill);color:var(--text-muted);padding:10px 14px}.in-context-section{border-top:1px solid var(--bg-pill);margin-top:48px;padding-top:40px}.in-context-header{text-align:center;margin-bottom:28px}.context-eyebrow{color:var(--accent-dark);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;font-size:11px;font-weight:800;display:block}.context-title{color:var(--text-main);letter-spacing:-.02em;font-size:24px;font-weight:800}@media (width<=860px){.detail-inspector-layout{grid-template-columns:1fr;gap:24px}}.back-btn-pill{transition:transform var(--transition-fast);align-self:flex-start;font-weight:600;text-decoration:none}.back-btn-pill:hover{transform:translate(-3px)}.detail-header-meta{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.detail-header-meta h1{letter-spacing:-.02em;color:var(--text-main);font-size:32px;font-weight:800}.detail-inspector-grid{background-color:var(--bg-container);border-radius:20px;grid-template-columns:320px 1fr;gap:24px;margin-bottom:48px;padding:24px;display:grid}.detail-stage-box{background-color:var(--bg-card);border-radius:var(--radius-card);min-height:280px;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;padding:24px;display:flex}.detail-customizer-box{flex-direction:column;gap:16px;display:flex}.ui-mocks-section{margin-top:40px}.mocks-section-header{margin-bottom:24px}.mocks-section-header h2{color:var(--text-main);letter-spacing:-.02em;margin-bottom:6px;font-size:24px;font-weight:800}.mocks-section-header p{color:var(--text-muted);font-size:15px}.mocks-grid-layout{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;display:grid}.mock-card{background-color:var(--bg-card);box-shadow:var(--shadow-sm);border-radius:16px;flex-direction:column;gap:16px;padding:20px;display:flex}.mock-card-header{justify-content:space-between;align-items:center;display:flex}.mock-pill-tag{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background-color:var(--bg-pill);border-radius:var(--radius-pill);padding:4px 10px;font-size:12px;font-weight:700}.mock-sidebar-box{background-color:var(--bg-container);border-radius:12px;flex-direction:column;gap:6px;padding:12px;display:flex}.mock-sidebar-item{color:var(--text-muted);transition:all var(--transition-fast);background:0 0;border-radius:10px;align-items:center;gap:10px;padding:10px 14px;font-size:14px;font-weight:600;display:flex}.mock-sidebar-item.active{background-color:var(--bg-card);color:var(--accent-dark);box-shadow:var(--shadow-sm)}.mock-dropdown-box{background-color:var(--bg-card);box-shadow:var(--shadow-md);border-radius:12px;flex-direction:column;gap:4px;width:100%;max-width:240px;margin:0 auto;padding:8px;display:flex}.mock-dropdown-item{color:var(--text-main);transition:background var(--transition-fast);border-radius:8px;align-items:center;gap:10px;padding:8px 12px;font-size:13px;font-weight:500;display:flex}.mock-dropdown-item:hover,.mock-dropdown-item.active{background-color:var(--bg-pill)}.mock-bottombar-box{background-color:var(--bg-container);border-radius:16px;justify-content:space-around;align-items:center;padding:12px 20px;display:flex}.mock-tab-item{color:var(--text-muted);flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;display:flex}.mock-tab-item.active{color:var(--accent-dark)}.mock-widgets-box{flex-direction:column;gap:12px;display:flex}.mock-btn-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.mock-feature-card{background-color:var(--bg-container);border-radius:12px;align-items:flex-start;gap:12px;padding:16px;display:flex}.mock-feature-icon-badge{background-color:var(--bg-card);box-shadow:var(--shadow-sm);border-radius:10px;justify-content:center;align-items:center;padding:8px;display:flex}@media (width<=768px){.detail-inspector-grid{grid-template-columns:1fr}}.docs-page-layout{align-items:flex-start;gap:56px;max-width:1240px;margin:0 auto;padding:40px 24px 120px;display:flex}.docs-main-content{flex:1;min-width:0;max-width:780px}.docs-header-bar{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:12px;display:flex}.docs-h1{letter-spacing:-.03em;color:var(--text-main);margin:0;font-size:36px;font-weight:800;line-height:1.15}.docs-header-actions{align-items:center;gap:8px;display:flex}.copy-page-wrapper{display:inline-flex;position:relative}.copy-page-btn-group{background:var(--bg-pill);border-radius:var(--radius-pill);transition:background-color var(--transition-fast), transform var(--transition-fast);-webkit-user-select:none;user-select:none;align-items:center;padding:3px 6px;display:inline-flex}.copy-page-btn-group:hover{background:var(--bg-pill-hover)}.copy-page-main-btn{color:var(--text-main);font-family:var(--font-sans);cursor:pointer;border-radius:var(--radius-pill);transition:color var(--transition-fast), transform .2s cubic-bezier(.16, 1, .3, 1);background:0 0;border:none;align-items:center;gap:8px;padding:5px 10px 5px 8px;font-size:13.5px;font-weight:600;display:inline-flex}.copy-page-main-btn:hover{color:var(--accent-dark)}.copy-page-divider{background:#9b8afb40;width:1px;height:16px;margin:0 1px}.copy-page-arrow-btn{color:var(--text-main);cursor:pointer;border-radius:var(--radius-pill);transition:color var(--transition-fast), transform var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:5px 8px;display:inline-flex}.copy-page-arrow-btn:hover{color:var(--accent-dark)}.copy-page-dropdown{background:var(--bg-card);min-width:230px;box-shadow:var(--shadow-lg);z-index:200;border-radius:14px;flex-direction:column;gap:2px;padding:6px;animation:.15s cubic-bezier(.16,1,.3,1) dropdownFadeIn;display:flex;position:absolute;top:calc(100% + 8px);right:0}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown-btn-item{color:var(--text-main);cursor:pointer;text-align:left;width:100%;transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;border:none;border-radius:8px;align-items:center;gap:10px;padding:8px 12px;font-size:13px;font-weight:600;text-decoration:none;display:flex}.dropdown-btn-item:hover{background:var(--bg-pill);color:var(--accent-dark)}.docs-lead-text{color:var(--text-muted);margin-bottom:20px;font-size:17px;line-height:1.6}.docs-intro-p{color:var(--text-muted);margin-bottom:40px;font-size:15px;line-height:1.7}.doc-section{margin-bottom:48px;scroll-margin-top:90px}.doc-h2{letter-spacing:-.02em;color:var(--text-main);align-items:center;gap:10px;margin:0 0 12px;font-size:22px;font-weight:800;display:flex}.doc-h2 a{color:inherit;text-decoration:none}.doc-p{color:var(--text-muted);margin:0 0 16px;font-size:15px;line-height:1.7}.doc-p strong{color:var(--text-main);font-weight:700}.inline-code{font-family:var(--font-mono);background:var(--bg-pill);color:var(--accent-dark);border-radius:6px;padding:3px 8px;font-size:13px;font-weight:600}.code-wrapper{background:var(--bg-pill);border-radius:var(--radius-card);font-family:var(--font-mono);margin:16px 0 24px;overflow:hidden}.code-header{background:#00000008;justify-content:space-between;align-items:center;padding:10px 18px;display:flex}.pkg-tabs{align-items:center;gap:4px;display:flex}.file-tag{color:var(--text-muted);align-items:center;gap:8px;font-size:12.5px;font-weight:700;display:inline-flex}.file-tag .lang-badge{background:var(--accent-soft);color:var(--accent-dark);text-transform:uppercase;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:800}.snippet-copy-btn{border-radius:var(--radius-pill);color:var(--accent-dark);cursor:pointer;font-size:12px;font-weight:700;font-family:var(--font-sans);transition:opacity var(--transition-fast), transform var(--transition-fast);background:0 0;border:none;align-items:center;gap:6px;padding:4px 12px;display:inline-flex}.snippet-copy-btn:hover{opacity:.8}.docs-sidebar{flex-direction:column;flex-shrink:0;gap:24px;width:240px;display:flex;position:sticky;top:100px}.toc-title{color:var(--text-main);letter-spacing:.02em;margin-bottom:12px;font-size:13.5px;font-weight:700}.toc-nav{border-left:2px solid var(--bg-pill);flex-direction:column;gap:6px;padding-left:14px;display:flex}.toc-link{color:var(--text-muted);transition:color var(--transition-fast), transform var(--transition-fast);padding:3px 0;font-size:13.5px;line-height:1.5;text-decoration:none;display:block}.toc-link:hover{color:var(--text-main)}.toc-link.active{color:var(--accent-dark);font-weight:700}.sidebar-callout{background:var(--bg-card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);flex-direction:column;gap:10px;padding:18px;display:flex}.sidebar-callout-title{color:var(--text-main);font-size:14px;font-weight:800;line-height:1.35}.sidebar-callout-desc{color:var(--text-muted);font-size:12.5px;line-height:1.55}.sidebar-callout-btn{border-radius:var(--radius-pill);background:var(--accent);color:#fff;cursor:pointer;transition:background-color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;margin-top:4px;padding:8px 14px;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex}.sidebar-callout-btn:hover{background:var(--accent-dark);transform:translateY(-1px)}.mobile-dynamic-island{display:none}@media (width<=960px){.docs-sidebar{display:none!important}.docs-main-content{width:100%!important;max-width:100%!important}.mobile-dynamic-island{flex-direction:column;align-items:center;z-index:9999!important;display:flex!important;position:fixed!important;bottom:24px!important;left:50%!important;transform:translate(-50%)!important}.dynamic-island-pill{color:#fff;border-radius:var(--radius-pill);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(12px);background:#181528;align-items:center;gap:12px;padding:8px 14px 8px 16px;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s;box-shadow:0 14px 40px #18152873,0 0 0 1px #ffffff26;display:flex!important}.dynamic-island-pill:active{transform:scale(.96)}.island-dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:8px;height:8px}.island-text-wrapper{perspective:400px;align-items:center;max-width:190px;height:20px;display:inline-flex;position:relative;overflow:hidden}.island-text-flip{letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;color:#fff;backface-visibility:hidden;transform-style:preserve-3d;align-items:center;font-size:13px;font-weight:600;animation:.28s ease-out forwards cleanTextFlip;display:flex;overflow:hidden}@keyframes cleanTextFlip{0%{opacity:0;transform:rotateX(-90deg)}to{opacity:1;transform:rotateX(0)}}.island-progress-ring{flex-shrink:0;justify-content:center;align-items:center;display:flex}.mobile-toc-popover{background:#181528;border:1px solid #ffffff1f;border-radius:18px;flex-direction:column;gap:4px;width:260px;padding:8px;animation:.2s cubic-bezier(.16,1,.3,1) forwards popoverFadeUp;display:flex;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%);box-shadow:0 16px 44px #0006}@keyframes popoverFadeUp{0%{opacity:0;transform:translate(-50%,10px)scale(.95)}to{opacity:1;transform:translate(-50%)scale(1)}}.popover-toc-item{color:#ffffffbf;border-radius:12px;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13px;font-weight:600;text-decoration:none;transition:background .15s,color .15s;display:flex}.popover-toc-item:hover,.popover-toc-item.active{color:#fff;background:#9b8afb2e}.popover-toc-item .active-dot{background:var(--accent);border-radius:50%;width:6px;height:6px}}@media (width<=640px){.docs-page-layout{flex-direction:column!important;gap:24px!important;padding:20px 16px 100px!important}.docs-header-bar{flex-direction:column!important;align-items:flex-start!important;gap:12px!important}.docs-h1{font-size:26px!important;line-height:1.25!important}.docs-header-actions,.copy-page-wrapper,.copy-page-btn-group{width:auto!important}.copy-page-dropdown{width:240px!important;left:0!important;right:auto!important}.code-wrapper pre{padding:14px 16px!important;font-size:12.5px!important}.code-header{flex-wrap:wrap!important;gap:8px!important}.pkg-tabs{flex-wrap:wrap!important}.docs-table-container{margin:12px 0 20px!important}}.skeleton-card{background-color:var(--bg-card);-webkit-user-select:none;user-select:none;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;padding:20px 12px 14px;display:flex;position:relative;overflow:hidden;box-shadow:0 2px 8px #9b8afb0d}.skeleton-icon-placeholder{background:var(--bg-pill);border-radius:12px;width:48px;height:48px}.skeleton-label-placeholder{border-radius:var(--radius-pill);background:var(--bg-pill);width:60%;height:12px;margin-top:14px}.skeleton-shimmer{background:linear-gradient(90deg,#fff0 0%,#9b8afb29 50%,#fff0 100%);width:100%;height:100%;animation:1.4s infinite shimmerPulse;position:absolute;top:0;left:0}@keyframes shimmerPulse{0%{transform:translate(-100%)}to{transform:translate(100%)}}.detail-layout-container{width:100%;max-width:1160px;margin:0 auto;padding:32px 24px 80px}.detail-hero-layout{grid-template-columns:280px 1fr;align-items:stretch;gap:32px;display:grid}.detail-left-stage-column{flex-direction:column;width:100%;height:100%;display:flex}.stage-card-preview{background-color:var(--bg-card);width:100%;height:100%;min-height:260px;color:var(--text-main);box-sizing:border-box;background-image:radial-gradient(#9b8afb40 1.2px,#0000 0);background-size:16px 16px;border:1px solid #9b8afb26;border-radius:24px;justify-content:center;align-items:center;display:flex;box-shadow:0 4px 20px #6e54f50d}.detail-right-content-column{flex-direction:column;gap:20px;min-width:0;display:flex}.detail-header-flex-row{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.detail-meta-left{flex-direction:column;gap:6px;display:flex}.detail-title{color:var(--text-main);letter-spacing:-.02em;margin:0;font-size:32px;font-weight:800;line-height:1.1}.detail-subtitle{color:var(--text-muted);font-size:13.5px;font-family:var(--font-mono);margin:0}.detail-tags-row{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.detail-tag-pill{color:var(--accent-dark);background:var(--bg-pill);border-radius:var(--radius-pill);text-transform:capitalize;-webkit-user-select:none;user-select:none;transition:all var(--transition-fast);align-items:center;padding:4px 10px;font-size:11px;font-weight:600;display:inline-flex}.detail-tag-pill:hover{background:var(--bg-pill-hover)}.detail-meta-stats-right{text-align:right;flex-direction:column;gap:6px;display:flex}.stat-line{justify-content:flex-end;align-items:center;gap:8px;font-size:12.5px;display:flex}.stat-label{color:var(--text-muted);font-weight:500}.stat-badge{font-family:var(--font-mono);color:var(--text-main);background:var(--bg-pill);border-radius:6px;padding:2px 8px;font-weight:700}.detail-actions-dropdown-row{align-items:center;gap:12px;display:flex}.action-pill-btn{border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);border:none;flex:none;justify-content:center;align-items:center;gap:8px;padding:8px 18px;font-size:13.5px;font-weight:700;display:inline-flex}.action-pill-btn svg{flex-shrink:0}.action-pill-btn.primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px #9b8afb59}.action-pill-btn.primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.action-pill-btn.secondary{background:var(--bg-pill);color:var(--text-main)}.action-pill-btn.secondary:hover{background:var(--bg-pill-hover);color:var(--accent-dark)}.framework-tabs-container{background:var(--bg-pill);box-shadow:none;border-radius:16px;overflow:hidden}.framework-tabs-bar{background:var(--bg-pill);border-bottom:1px solid #6e54f526;gap:8px;padding:8px 10px;display:flex;overflow-x:auto}.framework-tabs-bar .tab-btn{color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;background:0 0;border-radius:10px;padding:6px 14px;font-size:12.5px;font-weight:700}.framework-tabs-bar .tab-btn:hover{color:var(--text-main)}.framework-tabs-bar .tab-btn.active{background:var(--accent);color:#fff;box-shadow:none}.framework-code-box{background:var(--bg-pill);color:var(--text-main);box-sizing:border-box;height:140px;padding:16px 20px;position:relative;overflow:auto}.framework-code-box::-webkit-scrollbar{width:6px;height:6px}.framework-code-box::-webkit-scrollbar-track{background:0 0}.framework-code-box::-webkit-scrollbar-thumb{background:#6e54f540;border-radius:4px}.framework-code-box::-webkit-scrollbar-thumb:hover{background:#6e54f573}.code-lang-label{font-size:10px;font-family:var(--font-mono);text-transform:uppercase;color:var(--text-muted);font-weight:700;position:absolute;top:10px;right:14px}.framework-code-box pre{font-family:var(--font-mono);white-space:pre-wrap;word-break:break-all;margin:0;font-size:13.5px;line-height:1.65}.code-line{color:var(--text-main)}.code-tag{color:#6e54f5;font-weight:600}.code-attr{color:#3b82f6}.code-str{color:#059669}.detail-section-divider{background:linear-gradient(90deg,#0000 0%,#6e54f54d 30% 70%,#0000 100%);border:none;width:60%;max-width:560px;height:1px;margin:40px auto 32px}.page-fade-transition{will-change:opacity, transform;animation:.28s cubic-bezier(.16,1,.3,1) forwards pageFadeIn}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.icon-in-action-section{text-align:center}.in-action-title{color:var(--text-main);margin-bottom:32px;font-size:22px;font-weight:800}.in-action-grid{text-align:left;grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.action-card-mock{background:var(--bg-card);box-shadow:var(--shadow-sm);border:1px solid var(--bg-pill);border-radius:20px;flex-direction:column;justify-content:space-between;min-height:180px;padding:24px;display:flex}.mock-card-body{flex-direction:column;justify-content:space-between;height:100%;display:flex}.mock-lines-group{flex-direction:column;gap:8px;margin-bottom:24px;display:flex}.mock-line-bar{background:var(--bg-pill);border-radius:5px;height:10px}.mock-line-bar.wide{width:80%}.mock-line-bar.medium{width:60%}.mock-actions-row{gap:10px;display:flex}.mock-input-field{background:var(--bg-pill);border-radius:12px;align-items:center;gap:10px;padding:10px 14px;display:flex}.mock-input-placeholder{color:var(--text-muted);font-size:13px}.mock-badges-row{flex-wrap:wrap;gap:8px;display:flex}.mock-badge{border-radius:var(--radius-pill);padding:5px 12px;font-size:12px;font-weight:700}.mock-badge.red{color:#ff5c8d;background:#ff5c8d26}.mock-badge.blue{color:#6e54f5;background:#6e54f526}.mock-badge.green{color:#00c853;background:#00c85326}@media (width<=900px){.detail-layout-container{padding:20px 16px 60px}.detail-hero-layout{flex-direction:column;align-items:stretch;gap:24px;display:flex}.detail-left-stage-column{width:100%;height:auto}.stage-card-preview{aspect-ratio:1;border-radius:20px;width:100%;height:auto}.stage-card-preview svg{width:45%;height:45%}.detail-right-content-column{width:100%}.detail-header-flex-row{flex-direction:column;align-items:flex-start;gap:10px}.detail-actions-dropdown-row{flex-wrap:wrap;gap:8px;width:100%;display:flex}.action-pill-btn{white-space:nowrap;flex:none;width:auto;padding:8px 14px;font-size:12.5px}.in-action-grid{grid-template-columns:1fr;gap:16px}}