.detail-page{--detail-code-bg:var(--color-surface-2);--detail-code-fg:var(--color-fg);--detail-code-muted:var(--color-muted);--detail-code-border:var(--color-border);--detail-code-keyword:var(--color-accent);--detail-install-bg:var(--color-surface-2);--detail-install-fg:var(--color-fg);background:var(--color-bg);color:var(--color-fg);-webkit-font-smoothing:antialiased}.dark .detail-page{--detail-code-bg:var(--color-surface-2);--detail-code-fg:var(--color-fg);--detail-code-muted:var(--color-muted);--detail-code-border:var(--color-border);--detail-code-keyword:var(--color-accent);--detail-install-bg:var(--color-surface-2);--detail-install-fg:var(--color-fg)}.detail-page .detail-preview-card{corner-shape:squircle;background-color:var(--color-surface-2);box-shadow:0 1px 2px #0000000a,0 8px 24px #0000000f}.dark .detail-page .detail-preview-card{background-color:var(--color-surface-2);box-shadow:0 1px 2px #0003,0 12px 32px #00000059}.detail-page .detail-demo-frame{border:.5px solid var(--preview-border,var(--color-border));background-color:var(--preview-bg,var(--color-bg));border-radius:1.25rem;width:100%;height:100%;overflow:hidden;box-shadow:inset 0 1px #ffffff0a}.detail-page .detail-elevated-pill{corner-shape:squircle;background-color:var(--color-bg);box-shadow:none;border:none}.dark .detail-page .detail-elevated-pill{box-shadow:none;border:none}.detail-page .detail-panel,.dark .detail-page .detail-panel{background-color:var(--color-bg)!important}.detail-page .detail-toolbar-btn{corner-shape:squircle;transition:transform .15s cubic-bezier(.16,1,.3,1),color .15s}.detail-page .detail-toolbar-btn:hover{color:var(--color-fg)!important}.detail-page .detail-toolbar-btn:active{transform:scale(.96)}.detail-page .detail-panel{background-color:var(--color-bg)}.detail-page .detail-section{flex-direction:column;gap:.75rem;display:flex}.detail-page .detail-badge{background-color:var(--color-surface);width:fit-content;color:var(--color-muted);border:.5px solid var(--color-border);border-radius:.375rem;padding:.25rem .625rem;font-size:11px;font-weight:500}.detail-page .detail-code-block{scrollbar-width:none;-ms-overflow-style:none;border:none;border-radius:.75rem;margin:0}.detail-page .detail-code-block::-webkit-scrollbar{display:none}.detail-page .detail-code-usage{background-color:var(--detail-code-bg);color:var(--detail-code-fg);white-space:pre;padding:1.125rem 1.25rem;line-height:1.7}.detail-page .detail-code-install{background-color:var(--detail-install-bg);color:var(--detail-install-fg);border-color:var(--color-border);white-space:nowrap;padding:.625rem .875rem}.code-keyword{font-weight:600;color:var(--preview-accent-text,var(--color-accent))!important}.code-tag{font-weight:500;color:var(--preview-accent-text,var(--color-accent))!important}.code-string{color:var(--color-muted)!important}.code-attr{color:var(--color-fg)!important}.code-comment{font-style:italic;color:var(--color-muted)!important}.detail-page .detail-code-wrapper{border-radius:.75rem;position:relative;overflow:hidden}.detail-page .detail-code-wrapper .detail-copy-btn{z-index:1;position:absolute;top:.5rem;right:.5rem}.detail-page .detail-code-drawer-pre{font-family:var(--font-mono), monospace;background-color:var(--detail-code-bg);color:var(--detail-code-fg);scrollbar-width:none;-ms-overflow-style:none;border:none;border-radius:.75rem;flex:1;margin:0;padding:1rem 1.125rem;font-size:12px;line-height:1.65;overflow:auto}.detail-page .detail-code-drawer-pre::-webkit-scrollbar{display:none}.detail-page .detail-code-inline{white-space:nowrap;font-family:var(--font-mono), monospace;color:var(--color-fg);align-items:center;font-size:12px;display:inline-flex}.detail-page .detail-props-header{border-bottom:.5px solid var(--color-border);letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted);gap:1rem;padding:0 .25rem .625rem;font-size:10px;font-weight:500;display:flex}.detail-page .detail-props-row{border-bottom:.5px solid color-mix(in srgb, var(--color-border) 60%, transparent);align-items:flex-start;gap:1rem;padding:1rem .25rem;display:flex}.detail-page .detail-props-row:last-child{border-bottom:none}.detail-page .detail-props-type{font-family:var(--font-mono), monospace;color:var(--detail-code-keyword);font-size:12px;line-height:1.6}.detail-page .detail-props-desc{color:var(--color-fg);font-size:14px;line-height:1.6}.detail-page .detail-swatch{transition:transform .15s cubic-bezier(.16,1,.3,1)}.detail-page .detail-swatch:active{transform:scale(.96)}.detail-page .detail-swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--color-bg), 0 0 0 3.5px var(--color-accent)}.detail-page .detail-preview-enter{animation:.7s cubic-bezier(.16,1,.3,1) both detail-fade-up}.detail-page ::selection{background-color:color-mix(in srgb, var(--color-accent) 18%, transparent);color:var(--color-fg)}@keyframes detail-fade-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.detail-page .detail-preview-enter{animation:none}.detail-page .detail-toolbar-btn:active,.detail-page .detail-swatch:active{transform:none}}.sidebar-nav-item{position:relative;overflow:visible!important}.sidebar-nav-item:after{content:"";width:100%;height:100%;padding:.875rem;position:absolute;top:50%;left:0;transform:translateY(-50%)}