.detail-container{padding-bottom:120rem}.detail-header-section{border-bottom:1rem solid var(--border-primary);margin-bottom:60rem;padding:132rem 0 60rem}.detail-grid{grid-template-columns:2fr 1fr;gap:60rem;display:grid}.detail-title{letter-spacing:-2rem;margin-bottom:20rem;font-size:56rem;font-weight:800}.detail-meta-row{flex-wrap:wrap;gap:24rem;margin-bottom:30rem;display:flex}.detail-meta-item{color:var(--text-secondary);align-items:center;gap:8rem;font-size:15rem;display:flex}.detail-meta-bold{color:var(--text-primary);font-weight:600}.install-card{border:1rem solid var(--border-primary);background:#ffffff05;border-radius:16rem;margin-bottom:40rem;padding:24rem}.install-title{text-transform:uppercase;color:var(--text-secondary);letter-spacing:1rem;margin-bottom:12rem;font-size:14rem;font-weight:600}.code-block-wrapper{font-family:var(--font-mono);color:#a5d6ff;background:#010810;border:1rem solid #ffffff14;border-radius:12rem;justify-content:space-between;align-items:center;padding:16rem 24rem;font-size:14rem;display:flex;position:relative}.copy-btn{border:1rem solid var(--border-primary);color:var(--text-secondary);cursor:pointer;background:#ffffff0d;border-radius:8rem;padding:8rem;transition:all .3s}.copy-btn:hover{color:var(--text-primary);background:#ffffff1a}.features-section{margin-bottom:80rem}.features-title{margin-bottom:24rem;font-size:28rem;font-weight:700}.features-grid{grid-template-columns:1fr 1fr;gap:24rem;display:grid}.feature-item{gap:16rem;display:flex}.feature-check-icon{color:var(--accent-purple);flex-shrink:0;margin-top:4rem}.feature-name{margin-bottom:6rem;font-size:16rem;font-weight:600}.feature-desc{color:var(--text-secondary);font-size:14rem;line-height:1.5}.sandbox-card{border:1rem solid var(--border-primary);background:#020d1966;border-radius:24rem;margin-top:60rem;padding:40rem;box-shadow:0 20rem 40rem #0003}.sandbox-header{margin-bottom:30rem}.sandbox-title{letter-spacing:-1rem;font-size:32rem;font-weight:800}.sandbox-grid{grid-template-columns:1fr 1fr;gap:40rem;display:grid}.sandbox-viewport{background:#010810;border:1rem solid #ffffff14;border-radius:20rem;justify-content:center;align-items:center;min-height:560rem;padding:30rem;display:flex;position:relative;overflow:visible}.sandbox-controls{border:1rem solid var(--border-primary);background:#ffffff03;border-radius:20rem;flex-direction:column;gap:24rem;padding:30rem;display:flex}.control-group{flex-direction:column;gap:8rem;display:flex}.control-label{text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5rem;font-size:13rem;font-weight:600}.control-input-range{width:100%;accent-color:var(--accent-purple);border-radius:3rem;height:6rem}.control-select{border:1rem solid var(--border-primary);color:var(--text-primary);font-family:var(--font-sans);background:#ffffff0a;border-radius:8rem;outline:none;padding:10rem 16rem}.control-toggle{cursor:pointer;border:1rem solid var(--border-primary);-webkit-user-select:none;user-select:none;background:#ffffff05;border-radius:8rem;align-items:center;gap:12rem;min-height:48rem;padding:10rem 16rem;font-size:14rem;transition:all .2s;display:flex}.control-toggle:hover{background:#ffffff0a;border-color:#ffffff26}.control-checkbox{width:18rem;height:18rem;accent-color:var(--accent-purple)}.demo-carousel-wrapper{width:100%;max-width:560rem;overflow:hidden}.demo-carousel-list{display:flex}.demo-carousel-slide{background:linear-gradient(135deg, var(--bg-card), var(--accent-purple));color:#fff;border-radius:16rem;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:100%;height:300rem;padding:24rem;font-size:24rem;font-weight:700;display:flex}.demo-zoom-container{cursor:zoom-in;border-radius:16rem;width:340rem;height:440rem;position:relative;overflow:hidden}.demo-zoom-image{object-fit:cover;width:100%;height:100%;transition:transform .1s ease-out}.demo-sortable-list{flex-direction:column;gap:12rem;width:100%;max-width:480rem;display:flex}.demo-sortable-item{border:1rem solid var(--border-primary);color:var(--text-primary);cursor:grab;-webkit-user-select:none;user-select:none;background:#ffffff08;border-radius:12rem;justify-content:space-between;align-items:center;padding:16rem 20rem;display:flex}.demo-sortable-item:active{cursor:grabbing}.demo-flexogrid-item{border:1rem solid var(--accent-purple);color:var(--text-primary);background:#863bff14;border-radius:12rem;justify-content:center;align-items:center;padding:20rem;font-size:16rem;font-weight:600;display:flex}.demo-flexogrid-item.card-a{height:140rem}.demo-flexogrid-item.card-b{height:220rem}.demo-flexogrid-item.card-c{height:160rem}.demo-flexogrid-item.card-d{height:180rem}.demo-flexogrid-item.card-e{height:120rem}.demo-flexogrid-item.card-f{height:200rem}@media (max-width:1024px){.detail-grid,.sandbox-grid{grid-template-columns:1fr}.controls-grid{grid-template-columns:1fr!important}.col-span-2,.controls-section-title{grid-column:span 1!important}}.controls-grid{grid-template-columns:1fr 1fr;gap:20rem;display:grid}.col-span-2{grid-column:span 2}.controls-section-title{border-bottom:1rem solid var(--border-primary);grid-column:span 2;align-items:center;gap:8rem;margin-top:10rem;padding-bottom:12rem;font-size:18rem;font-weight:700;display:flex}.tooltip-container{cursor:help;align-items:center;display:inline-flex;position:relative}.tooltip-trigger{color:var(--text-secondary);background:#ffffff14;border-radius:50%;justify-content:center;align-items:center;width:16rem;height:16rem;margin-left:6rem;font-size:11rem;font-weight:700;transition:all .2s;display:inline-flex}.tooltip-container:hover .tooltip-trigger{background:var(--primary);color:#fff}.tooltip-trigger.disabled{cursor:not-allowed;color:#ef4444!important;background:#ef444426!important;border:1px solid #ef44444d!important}.tooltip-container:hover .tooltip-trigger.disabled{color:#fff!important;background:#ef4444!important}.disabled-group input,.disabled-group select,.disabled-group .gs-select-container,.disabled-group .gs-select{opacity:.4!important;pointer-events:none!important;cursor:not-allowed!important}.control-toggle.disabled-group{opacity:.4!important;cursor:not-allowed!important}.control-toggle.disabled-group input{pointer-events:none!important}.tooltip-text{visibility:hidden;background-color:var(--dark);border:1rem solid var(--border);color:var(--text);text-align:center;z-index:10000;opacity:0;pointer-events:none;text-transform:none;letter-spacing:normal;border-radius:8rem;width:220rem;padding:10rem 14rem;font-size:12rem;font-weight:400;line-height:1.4;transition:opacity .2s,visibility .2s;position:absolute;bottom:130%;left:50%;transform:translate(-50%);box-shadow:0 8rem 24rem #00000080}.tooltip-text:after{content:"";border-style:solid;border-width:5rem;border-color:var(--dark) transparent transparent transparent;margin-left:-5rem;position:absolute;top:100%;left:50%}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1}.control-input-number{border:1rem solid var(--border-primary);color:var(--text-primary);font-family:var(--font-sans);background:#ffffff0a;border-radius:8rem;outline:none;width:100%;padding:10rem 16rem}.control-input-number:focus{border-color:var(--primary);background:#ffffff0f}.sandbox-btn{border:1rem solid var(--border-primary);color:var(--text-secondary);cursor:pointer;background:#ffffff0a;border-radius:8rem;justify-content:center;align-items:center;padding:8rem 16rem;font-size:13rem;font-weight:500;transition:all .2s;display:inline-flex}.sandbox-btn:hover{color:var(--text-primary);background:#ffffff14}.sandbox-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.sandpack-playground{border:1rem solid var(--border-primary);background:#0d121f;border-radius:20rem;grid-template-columns:1.2fr 1fr;gap:0;min-height:580rem;margin-top:24rem;display:grid;overflow:hidden;box-shadow:0 30rem 60rem #00000059}.sandpack-editor{border-right:1rem solid var(--border-primary);background:#0b0f19;flex-direction:column;height:100%;display:flex;overflow:hidden}.editor-tab-bar{border-bottom:1rem solid var(--border-primary);background:#080c14;align-items:center;height:40rem;padding-left:16rem;display:flex}.editor-tab{border:1rem solid var(--border-primary);font-family:var(--font-mono);color:var(--text-primary);background:#0b0f19;border-bottom:none;border-radius:6rem 6rem 0 0;align-items:center;height:39rem;margin-top:1rem;padding:8rem 20rem;font-size:13rem;display:flex}.editor-workspace{flex:1;height:calc(100% - 40rem);display:flex;position:relative;overflow:hidden}.editor-gutter{text-align:right;font-family:var(--font-mono);color:#ffffff26;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:#080c14;border-right:1rem solid #ffffff08;flex-shrink:0;width:44rem;height:100%;padding:20rem 0;font-size:13rem;line-height:20rem;overflow:hidden}.gutter-line-number{box-sizing:border-box;height:20rem;padding-right:12rem}.editor-textarea-container{flex:1;height:100%;position:relative;overflow:hidden}.editor-textarea{resize:none;width:100%;height:100%;font-family:var(--font-mono);color:#0000;caret-color:#fff;z-index:2;white-space:pre;box-sizing:border-box;background:0 0;border:none;outline:none;padding:20rem;font-size:13rem;line-height:20rem;position:absolute;top:0;left:0;overflow:auto}.editor-preview-code{width:100%;height:100%;font-family:var(--font-mono);color:#abb2bf;z-index:1;white-space:pre;box-sizing:border-box;pointer-events:none;margin:0;padding:20rem;font-size:13rem;line-height:20rem;position:absolute;top:0;left:0;overflow:hidden}.code-keyword{color:#c678dd;font-weight:600}.code-string{color:#98c379}.code-tag{color:#e06c75}.code-prop{color:#d19a66}.code-boolean{color:#56b6c2}.code-comment{color:#5c6370;font-style:italic}.sandpack-preview{background:#0d1222;flex-direction:column;height:100%;display:flex;overflow:hidden}.preview-header{border-bottom:1rem solid var(--border-primary);background:#080c14;align-items:center;gap:6rem;height:40rem;padding:0 16rem;display:flex}.preview-dot{border-radius:50%;width:8rem;height:8rem;display:inline-block}.preview-dot.red{background:#ef4444}.preview-dot.yellow{background:#eab308}.preview-dot.green{background:#22c55e}.preview-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5rem;margin-left:10rem;font-size:12rem;font-weight:700}.preview-body-container{background:radial-gradient(circle at center, rgba(var(--plugin-rgb,134, 59, 255), .15) 0%, #0d122266 100%);box-sizing:border-box;flex:1;justify-content:center;align-items:center;min-height:540rem;padding:40rem;display:flex;position:relative;overflow:visible}.preview-body-content,.native-preview{justify-content:center;align-items:center;width:100%;display:flex}.native-preview input[type=text],.native-preview input:not([type]){color:#fff;background:#ffffff0d;border:1rem solid #ffffff1f;border-radius:10rem;outline:none;padding:12rem 14rem;font-size:14rem;transition:border-color .2s}.native-preview input:focus{border-color:var(--accent-purple)}.gsdemo-btn{background:var(--accent-purple);color:#fff;cursor:pointer;border:none;border-radius:12rem;padding:14rem 26rem;font-size:14rem;font-weight:600;transition:transform .15s,filter .2s}.gsdemo-btn:hover{filter:brightness(1.15);transform:translateY(-1rem)}.gsdemo-btn.secondary{background:#78788c40}.preview-fallback{text-align:center;flex-direction:column;align-items:center;max-width:460rem;padding:20rem;display:flex}.preview-fallback-title{color:#fff;margin-bottom:10rem;font-size:22rem;font-weight:700}.preview-fallback-text{color:var(--text-secondary);margin-bottom:24rem;font-size:14rem;line-height:1.65}.sandbox-controls-bottom{border:1rem solid var(--border-primary);background:#020d1966;border-radius:24rem;margin-top:30rem;padding:36rem 40rem;box-shadow:0 20rem 40rem #0003}.controls-bottom-title{color:#fff;border-bottom:1rem solid var(--border-primary);align-items:center;gap:8rem;margin-bottom:24rem;padding-bottom:12rem;font-size:18rem;font-weight:700;display:flex}.sandbox-controls-bottom .controls-grid{grid-template-columns:repeat(auto-fill,minmax(280rem,1fr));gap:20rem;display:grid}@media (max-width:960px){.sandpack-playground{grid-template-columns:1fr;min-height:auto}.sandpack-editor{border-right:none;border-bottom:1rem solid var(--border-primary);height:320rem}}.api-reference-section{border:1px solid var(--border-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172a66;border-radius:24rem;margin-top:60rem;padding:40rem}.api-reference-title{font-family:var(--font-display);color:var(--text-primary);align-items:center;gap:12rem;margin-bottom:24rem;font-size:28rem;font-weight:700;display:flex}.api-tabs-header{border-bottom:1px solid #ffffff14;gap:12rem;margin-bottom:32rem;padding-bottom:16rem;display:flex}.api-tab-btn{font-family:var(--font-sans);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8rem;align-items:center;gap:8rem;padding:8rem 16rem;font-size:14rem;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.api-tab-btn:hover{color:var(--text-primary);background:#ffffff08}.api-tab-btn.active{color:#fff;background:linear-gradient(135deg, rgba(var(--plugin-rgb), .15) 0%, rgba(var(--plugin-rgb), .05) 100%);border:1px solid rgba(var(--plugin-rgb), .25);box-shadow:0 4rem 12rem rgba(var(--plugin-rgb), .1)}.api-table-wrapper{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;background:#080d184d;border:1px solid #ffffff0d;border-radius:12rem;max-height:480rem;overflow:auto}.api-table-wrapper::-webkit-scrollbar{width:6rem;height:6rem}.api-table-wrapper::-webkit-scrollbar-track{background:0 0}.api-table-wrapper::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3rem}.api-table-wrapper::-webkit-scrollbar-thumb:hover{background:#ffffff40}.api-table{border-collapse:collapse;text-align:left;width:100%}.api-table th{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.05em;z-index:10;background:#0c111dfa;border-bottom:1px solid #ffffff14;padding:16rem 24rem;font-size:13rem;font-weight:600;position:sticky;top:0}.api-table td{font-family:var(--font-sans);color:var(--text-secondary);vertical-align:middle;border-bottom:1px solid #ffffff0a;padding:18rem 24rem;font-size:14rem;line-height:1.5}.api-table tr:last-child td{border-bottom:none}.api-table tr:hover td{color:var(--text-primary);background:#ffffff03}.api-code-badge{font-family:var(--font-mono);color:#f43f5e;white-space:nowrap;background:#f43f5e14;border:1px solid #f43f5e26;border-radius:6rem;padding:3rem 8rem;font-size:12rem}.api-type-badge{font-family:var(--font-mono);color:#38bdf8;word-break:break-word;white-space:normal;background:#38bdf814;border:1px solid #38bdf826;border-radius:6rem;max-width:min(340rem,100%);padding:3rem 8rem;font-size:12rem;display:inline-block}.api-default-badge{font-family:var(--font-mono);color:#a78bfa;white-space:nowrap;background:#a78bfa14;border:1px solid #a78bfa26;border-radius:6rem;padding:3rem 8rem;font-size:12rem}.options-panels-layout{text-align:left;grid-template-columns:1.8fr 1.2fr;gap:32rem;display:grid}.options-panel-column{flex-direction:column;gap:16rem;display:flex}.options-column-subtitle{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);border-bottom:1rem solid #ffffff14;margin-bottom:8rem;padding-bottom:8rem;font-size:12rem;font-weight:700}.options-column-grid{grid-template-columns:repeat(auto-fill,minmax(200rem,1fr));gap:16rem;display:grid}.options-column-grid.flex-checkboxes{flex-direction:column;gap:12rem;display:flex}@media (max-width:1024px){.options-panels-layout{grid-template-columns:1fr;gap:24rem}}.gs-toast-notification{z-index:9999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0f1ee6;border:1px solid #ef444466;border-radius:12rem;align-items:center;gap:12rem;max-width:420rem;padding:16rem 24rem;animation:.35s cubic-bezier(.34,1.56,.64,1) slide-in-up-toast;display:flex;position:fixed;bottom:32rem;right:32rem;box-shadow:0 10rem 30rem #00000080,0 0 15rem #ef444426}.gs-toast-icon{color:#ef4444;flex-shrink:0}.gs-toast-message{font-family:var(--font-sans);color:#f1f5f9;font-size:14rem;line-height:1.4}@keyframes slide-in-up-toast{0%{opacity:0;transform:translateY(100%)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}@media (max-width:768px){.demo-carousel-wrapper{max-width:100%!important}.demo-zoom-container{width:100%!important;max-width:320px!important;height:380px!important}.demo-sortable-list{max-width:100%!important}.sandbox-preview-panel{min-height:auto!important;padding:16px!important}.preview-wrapper{padding:16px!important}.demo-carousel-slide{height:200px!important}.gs-toast-notification{border-radius:8px!important;max-width:calc(100% - 32px)!important;padding:12px 16px!important;bottom:16px!important;left:16px!important;right:16px!important}.gs-toast-message{font-size:13px!important}}.detail-demo-btn{background:var(--btn-accent);color:#fff;cursor:pointer;border:1px solid #ffffff1a;border-radius:12rem;align-items:center;gap:8rem;padding:12rem 24rem;font-size:14rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4rem 12rem #0003}.detail-demo-btn:hover{transform:translateY(-2rem);box-shadow:0 6rem 20rem #ffffff0d;background:var(--btn-accent-hover)!important}.detail-demo-btn svg{transition:transform .3s}.detail-demo-btn:hover svg{animation:1.2s ease-in-out infinite sparklePulse}@keyframes sparklePulse{0%,to{opacity:.8;transform:scale(1)rotate(0)}50%{opacity:1;filter:drop-shadow(0 0 4px var(--btn-accent));transform:scale(1.3)rotate(20deg)}}@keyframes detailFadeInUp{0%{opacity:0;transform:translateY(24rem)}to{opacity:1;transform:translateY(0)}}.detail-header-section{animation:.8s cubic-bezier(.16,1,.3,1) forwards detailFadeInUp}.sandbox-card{opacity:0;animation:.8s cubic-bezier(.16,1,.3,1) .15s forwards detailFadeInUp}.api-reference-section{opacity:0;animation:.8s cubic-bezier(.16,1,.3,1) .3s forwards detailFadeInUp}.features-section{opacity:0;animation:.8s cubic-bezier(.16,1,.3,1) .4s forwards detailFadeInUp}.code-column{flex-direction:column;gap:14rem;min-width:0;display:flex}.code-lang-switch{background:#060a14d9;border:1rem solid #ffffff17;border-radius:999rem;grid-template-columns:1fr 1fr;align-self:center;width:300rem;max-width:100%;padding:4rem;display:grid;position:relative;box-shadow:inset 0 2rem 8rem #00000073}.code-lang-thumb{will-change:transform;background:linear-gradient(135deg,#863bffd9 0%,#06b6d4bf 100%);border-radius:999rem;width:calc(50% - 4rem);transition:transform .32s cubic-bezier(.22,1,.36,1);position:absolute;top:4rem;bottom:4rem;left:4rem;box-shadow:0 4rem 16rem #863bff59,inset 0 1rem #ffffff38}.code-lang-switch[data-lang=react] .code-lang-thumb{transform:translate(100%)}.code-lang-btn{z-index:1;color:var(--text-secondary);font-family:var(--font-sans);letter-spacing:.2rem;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:999rem;justify-content:center;align-items:center;gap:8rem;padding:9rem 0;font-size:13.5rem;font-weight:600;transition:color .25s;display:inline-flex;position:relative}.code-lang-btn:hover:not(.active){color:var(--text-primary)}.code-lang-btn.active{color:#fff;text-shadow:0 1rem 2rem #00000059}.code-lang-btn:focus-visible{outline-offset:2rem;outline:2rem solid #863bffb3}.code-lang-dot{opacity:.5;border-radius:50%;flex:none;width:8rem;height:8rem;transition:opacity .25s,box-shadow .25s}.code-lang-dot.vanilla{background:#f7df1e}.code-lang-dot.react{background:#61dafb}.code-lang-btn.active .code-lang-dot{opacity:1;box-shadow:0 0 8rem}.code-lang-btn.active .code-lang-dot.vanilla{box-shadow:0 0 10rem #f7df1ea6}.code-lang-btn.active .code-lang-dot.react{box-shadow:0 0 10rem #61dafbb3}.light .code-lang-switch{background:#fffc;border-color:#00000014;box-shadow:inset 0 1rem 4rem #0000000f}.light .code-lang-btn.active{color:#fff}.install-cdn-block{align-items:flex-start}.install-cdn-snippet{white-space:pre;scrollbar-width:thin;flex:auto;min-width:0;margin:0;font-family:inherit;font-size:11.5rem;line-height:1.7;overflow-x:auto}