diff --git a/Makefile b/Makefile
index 74f04c81..8f35ba00 100644
--- a/Makefile
+++ b/Makefile
@@ -54,11 +54,13 @@ test: lint-rendering
 # UI markup, JS orchestrates. Fails when a web/src file builds more HTML
 # template literals than its recorded baseline (web/src/rendering-allowlist.txt),
 # or when a .templ file gains an inline <script> block (theme_flash_guard.templ
-# is the only sanctioned one). Shrink baselines as fragments move to templ
+# is the only sanctioned one). *.test.ts files are excluded: jsdom fixtures
+# build DOM in tests, they don't render shipped UI. Shrink baselines as
+# fragments move to templ
 # partials; grow one only with a written reason.
 lint-rendering:
 	@violations=""; \
-	for f in $$(grep -rlE 'innerHTML[[:space:]]*=[[:space:]]*' web/src --include='*.ts' | grep -v 'web/src/reader/'); do \
+	for f in $$(grep -rlE 'innerHTML[[:space:]]*=[[:space:]]*' web/src --include='*.ts' | grep -v 'web/src/reader/' | grep -v '\.test\.ts$$'); do \
 		count=$$(grep -E 'innerHTML[[:space:]]*=[[:space:]]*' $$f | grep -cvE 'innerHTML[[:space:]]*=[[:space:]]*""[[:space:]]*$$'); \
 		allowed=$$(grep -F "$$f:" web/src/rendering-allowlist.txt | cut -d: -f2); \
 		allowed=$${allowed:-0}; \
diff --git a/internal/docs/handler.go b/internal/docs/handler.go
index 02d9e16c..e266235d 100644
--- a/internal/docs/handler.go
+++ b/internal/docs/handler.go
@@ -31,7 +31,11 @@ func NewDocsHandler(docsPath string) *DocsHandler {
 			extension.GFM,
 			extension.Table,
 			highlighting.NewHighlighting(
-				highlighting.WithStyle("github"),
+				// Chroma renders code blocks with inline styles, so the
+				// palette ships with the HTML — no client-side highlighter
+				// needed. The docs are read on dark themes most of the time;
+				// code blocks keep a dark surface under light themes too.
+				highlighting.WithStyle("github-dark"),
 			),
 		),
 		goldmark.WithParserOptions(
@@ -83,10 +87,6 @@ func (h *DocsHandler) LoadDocument(docPath string) (*templates.Document, error)
 		return nil, fmt.Errorf("failed to convert markdown: %w", err)
 	}
 
-	// Debug: Log the raw HTML output from goldmark
-	htmlOutput := buf.String()
-	fmt.Printf("DEBUG: Goldmark output length: %d, first 200 chars: %q\n", len(htmlOutput), htmlOutput[:min(200, len(htmlOutput))])
-
 	// Extract title from first heading
 	title := h.extractTitle(content)
 
@@ -155,46 +155,35 @@ func (h *DocsHandler) generateTOC(content []byte) []templates.TOCItem {
 	return toc
 }
 
-// generateBreadcrumb generates breadcrumb navigation
+// generateBreadcrumb generates breadcrumb navigation. Only "Docs" links out:
+// directory segments have no landing pages, so they render as plain text
+// (URL left empty). The current page is omitted — the h1 below shows it.
 func (h *DocsHandler) generateBreadcrumb(docPath string) []templates.BreadcrumbItem {
 	parts := strings.Split(strings.TrimSuffix(docPath, ".md"), "/")
 	breadcrumb := []templates.BreadcrumbItem{
 		{Title: "Docs", URL: "/docs"},
 	}
 
-	path := ""
 	for i, part := range parts {
 		if part == "" {
 			continue
 		}
-		path += "/" + part
-		// Don't add the last part (current page)
-		if i < len(parts)-1 {
-			breadcrumb = append(breadcrumb, templates.BreadcrumbItem{
-				Title: cases.Title(language.English).String(strings.ReplaceAll(part, "-", " ")),
-				URL:   "/docs" + path,
-			})
+		if i == len(parts)-1 {
+			break // current page
 		}
+		breadcrumb = append(breadcrumb, templates.BreadcrumbItem{
+			Title: cases.Title(language.English).String(strings.ReplaceAll(part, "-", " ")),
+		})
 	}
 
 	return breadcrumb
 }
 
-// getCategory determines the category of a document
+// getCategory determines the category of a document. It reuses the nav
+// routing (placeDoc) so search results and breadcrumbs name sections exactly
+// as the sidebar does.
 func (h *DocsHandler) getCategory(docPath string) string {
-	if strings.Contains(docPath, "api") || strings.Contains(docPath, "API") {
-		return "API Reference"
-	}
-	if strings.Contains(docPath, "devices") {
-		return "Device Setup"
-	}
-	if strings.Contains(docPath, "contributing") || strings.Contains(docPath, "DEVELOPMENT") {
-		return "Contributing"
-	}
-	if strings.Contains(docPath, "SYNC") {
-		return "Sync Guide"
-	}
-	return "Documentation"
+	return placeDoc(docPath).section
 }
 
 // slugify converts a string to a URL-safe slug
@@ -234,134 +223,6 @@ func (h *DocsHandler) ListDocuments() ([]string, error) {
 	return docs, err
 }
 
-// GetAPIEndpointData returns endpoint data for the API explorer
-func (h *DocsHandler) GetAPIEndpointData(endpointPath string) (*templates.EndpointInfo, error) {
-	// Map endpoint path to data
-	// For now, return static examples based on the endpoint path
-	// In a full implementation, this would parse the markdown files
-
-	// Clean the path
-	endpointPath = strings.TrimPrefix(endpointPath, "api/")
-	endpointPath = strings.TrimSuffix(endpointPath, ".md")
-
-	// Map paths to endpoints
-	endpoints := map[string]templates.EndpointInfo{
-		"authentication/register": {
-			Method: "POST",
-			Path:   "/api/auth/register",
-			RequestBody: `{
-  "email": "user@example.com",
-  "username": "john",
-  "password": "SecureP@ss123!",
-  "first_name": "John",
-  "last_name": "Doe"
-}`,
-			Response: `{
-  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
-  "refresh_token": "d4f5g6h7...",
-  "user": {
-    "id": "uuid-here",
-    "email": "user@example.com",
-    "username": "john",
-    "role": "user",
-    "theme": "tokyo-night",
-    "created_at": "2026-01-31T10:00:00Z"
-  }
-}`,
-			Description: "Create a new user account",
-		},
-		"authentication/login": {
-			Method: "POST",
-			Path:   "/api/auth/login",
-			RequestBody: `{
-  "email": "user@example.com",
-  "password": "SecureP@ss123!"
-}`,
-			Response: `{
-  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
-  "refresh_token": "d4f5g6h7...",
-  "user": {
-    "id": "uuid-here",
-    "email": "user@example.com",
-    "username": "john",
-    "role": "user"
-  }
-}`,
-			Description: "Authenticate with email and password",
-		},
-		"authentication/refresh_token": {
-			Method: "POST",
-			Path:   "/api/auth/refresh",
-			RequestBody: `{
-  "refresh_token": "d4f5g6h7..."
-}`,
-			Response: `{
-  "token": "new-jwt-token",
-  "refresh_token": "new-refresh-token"
-}`,
-			Description: "Obtain a new JWT token using a refresh token",
-		},
-		"authentication/logout": {
-			Method:      "POST",
-			Path:        "/api/auth/logout",
-			RequestBody: `{}`,
-			Response:    `{}`,
-			Description: "Invalidate the current JWT token",
-		},
-		"users/get_profile": {
-			Method:      "GET",
-			Path:        "/api/users/me",
-			RequestBody: `{}`,
-			Response: `{
-  "id": "uuid",
-  "email": "user@example.com",
-  "username": "john",
-  "first_name": "John",
-  "last_name": "Doe",
-  "theme": "tokyo-night",
-  "role": "user",
-  "max_devices": 10,
-  "created_at": "2026-01-31T10:00:00Z"
-}`,
-			Description: "Retrieve the current authenticated user's profile",
-		},
-		"users/update_profile": {
-			Method: "PUT",
-			Path:   "/api/users/me/profile",
-			RequestBody: `{
-  "first_name": "John",
-  "last_name": "Smith"
-}`,
-			Response: `{
-  "id": "uuid",
-  "email": "user@example.com",
-  "username": "john",
-  "first_name": "John",
-  "last_name": "Smith",
-  "theme": "tokyo-night",
-  "role": "user"
-}`,
-			Description: "Update the current user's profile information",
-		},
-		"users/change_password": {
-			Method: "PUT",
-			Path:   "/api/users/me/password",
-			RequestBody: `{
-  "current_password": "oldPassword",
-  "new_password": "NewSecureP@ss123!"
-}`,
-			Response:    `{}`,
-			Description: "Change the current user's password",
-		},
-	}
-
-	if endpoint, ok := endpoints[endpointPath]; ok {
-		return &endpoint, nil
-	}
-
-	return nil, fmt.Errorf("endpoint not found: %s", endpointPath)
-}
-
 // SearchDoc represents a document for search indexing
 type SearchDoc struct {
 	ID      string `json:"id"`
diff --git a/internal/docs/http_handler.go b/internal/docs/http_handler.go
index 7aab8627..f18035f7 100644
--- a/internal/docs/http_handler.go
+++ b/internal/docs/http_handler.go
@@ -25,6 +25,49 @@ func NewHTTPHandler(docsPath string) *HTTPHandler {
 	}
 }
 
+// currentUser builds the template user from the optional auth middleware.
+// Docs routes render for both anonymous and signed-in visitors, so an empty
+// context user is a normal, expected state here.
+func (h *HTTPHandler) currentUser(c *echo.Context) templates.User {
+	if userID := c.Get("user"); userID != nil {
+		dbUser := userID.(database.Users)
+		theme := "tokyo-night"
+		if dbUser.Theme.Valid {
+			theme = dbUser.Theme.String
+		}
+		return templates.User{
+			ID:       uuid.UUID(dbUser.ID.Bytes).String(),
+			Username: dbUser.Username,
+			Email:    dbUser.Email,
+			Role:     dbUser.Role,
+			Theme:    theme,
+		}
+	}
+	return templates.User{Theme: "tokyo-night"}
+}
+
+// renderDocPage renders a document inside the docs layout.
+func (h *HTTPHandler) renderDocPage(c *echo.Context, doc *templates.Document) error {
+	currentPath := c.Request().URL.Path
+	nav := h.docs.BuildNavigation(currentPath)
+
+	var buf bytes.Buffer
+	if err := templates.DocsLayout(*nav, *doc, h.currentUser(c), currentPath).Render(c.Request().Context(), &buf); err != nil {
+		fmt.Printf("DOCS RENDER ERROR: %v\n", err)
+		return c.HTML(http.StatusInternalServerError, "Failed to render page: "+err.Error())
+	}
+	return c.HTML(http.StatusOK, buf.String())
+}
+
+// notFoundPage renders the standalone 404 page (no app chrome, no CDN).
+func (h *HTTPHandler) notFoundPage(c *echo.Context, title, message string) error {
+	var buf bytes.Buffer
+	if err := templates.DocsNotFound(title, message).Render(c.Request().Context(), &buf); err != nil {
+		return c.HTML(http.StatusInternalServerError, "Failed to render page")
+	}
+	return c.HTML(http.StatusNotFound, buf.String())
+}
+
 // ShowDocumentation renders a documentation page
 func (h *HTTPHandler) ShowDocumentation(c *echo.Context) error {
 	// Get the document path from URL parameter
@@ -38,312 +81,96 @@ func (h *HTTPHandler) ShowDocumentation(c *echo.Context) error {
 			return h.ShowAPIEndpoint(c, strings.TrimPrefix(docPath, "api/"))
 		}
 
-		// Return error page
-		errorHTML := fmt.Sprintf(`<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Document Not Found - Bookhoard</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body class="bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center">
-    <div class="text-center">
-        <h1 class="text-2xl font-bold mb-4">Document Not Found</h1>
-        <p class="mb-4">%s</p>
-        <a href="/docs" class="text-blue-400 hover:underline">Return to Documentation</a>
-    </div>
-</body>
-</html>`, err.Error())
-
-		return c.HTML(http.StatusNotFound, errorHTML)
+		return h.notFoundPage(c, "Document Not Found", err.Error())
 	}
 
-	// Get navigation
-	nav := h.docs.BuildNavigation()
+	return h.renderDocPage(c, doc)
+}
 
-	// Check if user is authenticated via middleware
-	var user templates.User
-	if userID := c.Get("user"); userID != nil {
-		dbUser := userID.(database.Users)
-		var theme string
-		if dbUser.Theme.Valid {
-			theme = dbUser.Theme.String
-		} else {
-			theme = "tokyo-night"
-		}
-		user = templates.User{
-			ID:       uuid.UUID(dbUser.ID.Bytes).String(),
-			Username: dbUser.Username,
-			Email:    dbUser.Email,
-			Role:     dbUser.Role,
-			Theme:    theme,
-		}
-	} else {
-		// Create empty user for unauthenticated users
-		user = templates.User{
-			ID:       "",
-			Username: "",
-			Email:    "",
-			Role:     "",
-			Theme:    "tokyo-night",
-		}
-	}
-
-	// Render documentation page
-	var buf bytes.Buffer
-	currentPath := c.Request().URL.Path
-	err = templates.DocsLayout(*nav, *doc, user, currentPath).Render(c.Request().Context(), &buf)
+// DocsHome renders the documentation index at /docs.
+func (h *HTTPHandler) DocsHome(c *echo.Context) error {
+	doc, err := h.docs.LoadDocument("index.md")
 	if err != nil {
-		fmt.Printf("DOCS RENDER ERROR: %v\n", err)
-		return c.HTML(http.StatusInternalServerError, "Failed to render page: "+err.Error())
+		return h.notFoundPage(c, "Documentation Not Found", err.Error())
 	}
-	fmt.Printf("DOCS: Successfully rendered %s (%d bytes)\n", docPath, buf.Len())
-	return c.HTML(http.StatusOK, buf.String())
+	return h.renderDocPage(c, doc)
 }
 
 // ShowAPIEndpoint shows a specific API endpoint documentation
 func (h *HTTPHandler) ShowAPIEndpoint(c *echo.Context, endpointPath string) error {
-	// Check if user is logged in
-	isLoggedIn := false
-	if userID := c.Get("user_id"); userID != nil {
-		isLoggedIn = true
-	}
-
-	// Get endpoint data for the explorer
-	endpointInfo, err := h.docs.GetAPIEndpointData(endpointPath)
-	_ = endpointInfo
-	if err != nil {
-		// Endpoint not found in explorer data, fall back to old behavior
-		return h.showLegacyAPIEndpoint(c, endpointPath, isLoggedIn)
-	}
-
 	// Load the markdown documentation for this endpoint
 	docPath := "api/" + endpointPath + ".md"
 	doc, err := h.docs.LoadDocument(docPath)
 	if err != nil {
-		errorHTML := `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>API Endpoint Not Found - Bookhoard</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body class="bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center">
-    <div class="text-center">
-        <h1 class="text-2xl font-bold mb-4">API Endpoint Not Found</h1>
-        <a href="/docs/api" class="text-blue-400 hover:underline">Return to API Documentation</a>
-    </div>
-</body>
-</html>`
-
-		return c.HTML(http.StatusNotFound, errorHTML)
+		return h.notFoundPage(c, "API Endpoint Not Found", "No documentation exists for this endpoint.")
 	}
 
-	// Get navigation
-	nav := h.docs.BuildNavigation()
+	return h.renderDocPage(c, doc)
+}
 
-	// Check if user is authenticated via middleware
-	var user templates.User
-	if userID := c.Get("user"); userID != nil {
-		dbUser := userID.(database.Users)
-		var theme string
-		if dbUser.Theme.Valid {
-			theme = dbUser.Theme.String
-		} else {
-			theme = "tokyo-night"
-		}
-		user = templates.User{
-			ID:       uuid.UUID(dbUser.ID.Bytes).String(),
-			Username: dbUser.Username,
-			Email:    dbUser.Email,
-			Role:     dbUser.Role,
-			Theme:    theme,
-		}
-	} else {
-		// Create empty user for unauthenticated users
-		user = templates.User{
-			ID:       "",
-			Username: "",
-			Email:    "",
-			Role:     "",
-			Theme:    "tokyo-night",
-		}
+// searchDocs runs the docs search and returns ranked, capped results.
+// Title matches outrank content matches.
+func (h *HTTPHandler) searchDocs(query string) []templates.SearchResultItem {
+	queryLower := strings.ToLower(strings.TrimSpace(query))
+	if queryLower == "" {
+		return nil
 	}
 
-	// Render API endpoint page
-	var buf bytes.Buffer
-	currentPath := c.Request().URL.Path
-	err = templates.DocsLayout(*nav, *doc, user, currentPath).Render(c.Request().Context(), &buf)
-
+	docs, err := h.docs.ListDocuments()
 	if err != nil {
-		return c.HTML(http.StatusInternalServerError, "Failed to render page")
+		return nil
 	}
 
+	var titleMatches, contentMatches []templates.SearchResultItem
+	for _, docPath := range docs {
+		doc, err := h.docs.LoadDocument(docPath)
+		if err != nil {
+			continue
+		}
+
+		item := templates.SearchResultItem{
+			Title:    doc.Title,
+			Category: doc.Category,
+			URL:      "/docs/" + strings.TrimSuffix(doc.SourceFile, ".md"),
+		}
+		if doc.SourceFile == "index.md" {
+			item.URL = "/docs"
+		}
+
+		if strings.Contains(strings.ToLower(doc.Title), queryLower) {
+			titleMatches = append(titleMatches, item)
+			continue
+		}
+		if strings.Contains(strings.ToLower(doc.Content), queryLower) {
+			contentMatches = append(contentMatches, item)
+		}
+	}
+
+	results := append(titleMatches, contentMatches...)
+	const maxResults = 30
+	if len(results) > maxResults {
+		results = results[:maxResults]
+	}
+	return results
+}
+
+// SearchPartial renders the search results HTML partial for the docs header
+// search box. The client swaps this markup in verbatim (rendering ownership:
+// the server renders the results, TypeScript only moves them).
+func (h *HTTPHandler) SearchPartial(c *echo.Context) error {
+	results := h.searchDocs(c.QueryParam("q"))
+
+	var buf bytes.Buffer
+	if err := templates.DocsSearchResults(results).Render(c.Request().Context(), &buf); err != nil {
+		return c.JSON(http.StatusInternalServerError, map[string]string{
+			"error": "failed to render search results",
+		})
+	}
+	c.Response().Header().Set("Content-Type", "text/html; charset=UTF-8")
 	return c.HTML(http.StatusOK, buf.String())
 }
 
-// showLegacyAPIEndpoint shows API endpoint documentation without explorer data
-func (h *HTTPHandler) showLegacyAPIEndpoint(c *echo.Context, endpointPath string, isLoggedIn bool) error {
-	endpoints := h.docs.GetAPIEndpoints()
-
-	// Find the endpoint
-	var foundEndpoint *APIEndpoint
-	for _, ep := range endpoints {
-		if strings.HasSuffix(endpointPath, strings.TrimPrefix(ep.Path, "/api/")) {
-			foundEndpoint = &ep
-			break
-		}
-	}
-
-	if foundEndpoint == nil {
-		errorHTML := `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>API Endpoint Not Found - Bookhoard</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body class="bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center">
-    <div class="text-center">
-        <h1 class="text-2xl font-bold mb-4">API Endpoint Not Found</h1>
-        <a href="/docs/api" class="text-blue-400 hover:underline">Return to API Documentation</a>
-    </div>
-</body>
-</html>`
-
-		return c.HTML(http.StatusNotFound, errorHTML)
-	}
-
-	// Get navigation
-	nav := h.docs.BuildNavigation()
-
-	// Check if user is authenticated via middleware
-	var user templates.User
-	currentPath := c.Request().URL.Path
-	if userID := c.Get("user"); userID != nil {
-		dbUser := userID.(database.Users)
-		var theme string
-		if dbUser.Theme.Valid {
-			theme = dbUser.Theme.String
-		} else {
-			theme = "tokyo-night"
-		}
-		user = templates.User{
-			ID:       uuid.UUID(dbUser.ID.Bytes).String(),
-			Username: dbUser.Username,
-			Email:    dbUser.Email,
-			Role:     dbUser.Role,
-			Theme:    theme,
-		}
-	} else {
-		// Create empty user for unauthenticated users
-		user = templates.User{
-			ID:       "",
-			Username: "",
-			Email:    "",
-			Role:     "",
-			Theme:    "tokyo-night",
-		}
-	}
-
-	// Render API endpoint page
-	var buf bytes.Buffer
-	err := templates.DocsLayout(*nav, templates.Document{
-		Title:   foundEndpoint.Title,
-		Content: fmt.Sprintf("<p>Documentation for <code>%s %s</code></p>", foundEndpoint.Method, foundEndpoint.Path),
-		TOC:     []templates.TOCItem{},
-		Breadcrumb: []templates.BreadcrumbItem{
-			{Title: "Docs", URL: "/docs"},
-			{Title: "API Reference", URL: "/docs/api"},
-			{Title: foundEndpoint.Category, URL: "/docs/api"},
-			{Title: foundEndpoint.Title, URL: ""},
-		},
-		Category:   "API Reference",
-		SourceFile: "api",
-	}, user, currentPath).Render(c.Request().Context(), &buf)
-
-	if err != nil {
-		return c.HTML(http.StatusInternalServerError, "Failed to render page")
-	}
-
-	return c.HTML(http.StatusOK, buf.String())
-}
-
-// DocsHome redirects to the documentation index
-func (h *HTTPHandler) DocsHome(c *echo.Context) error {
-	return c.Redirect(http.StatusFound, "/docs/index.md")
-}
-
-// APIHome shows the API documentation home page
-func (h *HTTPHandler) APIHome(c *echo.Context) error {
-	endpoints := h.docs.GetAPIEndpoints()
-	nav := h.docs.BuildNavigation()
-
-	// Check if user is authenticated via middleware
-	var user templates.User
-	currentPath := c.Request().URL.Path
-	if userID := c.Get("user"); userID != nil {
-		dbUser := userID.(database.Users)
-		var theme string
-		if dbUser.Theme.Valid {
-			theme = dbUser.Theme.String
-		} else {
-			theme = "tokyo-night"
-		}
-		user = templates.User{
-			ID:       uuid.UUID(dbUser.ID.Bytes).String(),
-			Username: dbUser.Username,
-			Email:    dbUser.Email,
-			Role:     dbUser.Role,
-			Theme:    theme,
-		}
-	} else {
-		// Create empty user for unauthenticated users
-		user = templates.User{
-			ID:       "",
-			Username: "",
-			Email:    "",
-			Role:     "",
-			Theme:    "tokyo-night",
-		}
-	}
-
-	// Build API documentation content
-	content := "<h2>API Endpoints</h2><p>Complete API reference for Bookhoard v1.0.</p><ul>"
-	for _, ep := range endpoints {
-		content += fmt.Sprintf(`<li><a href="/docs/api%s"><strong>%s %s</strong></a> - %s</li>`,
-			strings.TrimPrefix(ep.Path, "/api"),
-			ep.Method,
-			ep.Path,
-			ep.Title,
-		)
-	}
-	content += "</ul>"
-
-	apiDoc := &templates.Document{
-		Title:   "API Reference",
-		Content: content,
-		TOC:     []templates.TOCItem{},
-		Breadcrumb: []templates.BreadcrumbItem{
-			{Title: "Docs", URL: "/docs"},
-			{Title: "Developer", URL: "/docs/developer"},
-			{Title: "API Reference", URL: ""},
-		},
-		Category:   "API Reference",
-		SourceFile: "developer/api-reference.md",
-	}
-
-	var buf bytes.Buffer
-	err := templates.DocsLayout(*nav, *apiDoc, user, currentPath).Render(c.Request().Context(), &buf)
-
-	if err != nil {
-		return c.HTML(http.StatusInternalServerError, "Failed to render page")
-	}
-
-	return c.HTML(http.StatusOK, buf.String())
-}
-
-// Search searches through documentation
+// Search searches through documentation (JSON API).
 func (h *HTTPHandler) Search(c *echo.Context) error {
 	query := c.QueryParam("q")
 	if query == "" {
@@ -352,48 +179,19 @@ func (h *HTTPHandler) Search(c *echo.Context) error {
 		})
 	}
 
-	// Get all documents
-	docs, err := h.docs.ListDocuments()
-	if err != nil {
-		return c.JSON(http.StatusInternalServerError, map[string]string{
-			"error": "failed to list documents",
+	results := h.searchDocs(query)
+	jsonResults := make([]SearchResult, 0, len(results))
+	for _, r := range results {
+		jsonResults = append(jsonResults, SearchResult{
+			Title: r.Title,
+			URL:   r.URL,
+			Type:  r.Category,
 		})
 	}
 
-	// Simple search implementation
-	var results []SearchResult
-	queryLower := strings.ToLower(query)
-
-	for _, docPath := range docs {
-		doc, err := h.docs.LoadDocument(docPath)
-		if err != nil {
-			continue
-		}
-
-		// Check if title matches
-		if strings.Contains(strings.ToLower(doc.Title), queryLower) {
-			results = append(results, SearchResult{
-				Title: doc.Title,
-				URL:   "/docs/" + strings.TrimSuffix(doc.SourceFile, ".md"),
-				Type:  "Documentation",
-			})
-			continue
-		}
-
-		// Check if content matches (simple substring search)
-		contentLower := strings.ToLower(doc.Content)
-		if strings.Contains(contentLower, queryLower) {
-			results = append(results, SearchResult{
-				Title: doc.Title,
-				URL:   "/docs/" + strings.TrimSuffix(doc.SourceFile, ".md"),
-				Type:  "Documentation",
-			})
-		}
-	}
-
 	return c.JSON(http.StatusOK, map[string]interface{}{
-		"results": results,
-		"count":   len(results),
+		"results": jsonResults,
+		"count":   len(jsonResults),
 	})
 }
 
@@ -404,15 +202,6 @@ type SearchResult struct {
 	Type  string
 }
 
-// TryEndpoint executes an API endpoint (for the interactive explorer)
-func (h *HTTPHandler) TryEndpoint(c *echo.Context) error {
-	// This would execute the actual API request
-	// For now, return a placeholder
-	return c.JSON(http.StatusOK, map[string]interface{}{
-		"message": "API explorer not yet implemented",
-	})
-}
-
 // ServeSearchIndex serves the Lunr.js search index
 func (h *HTTPHandler) ServeSearchIndex(c *echo.Context) error {
 	index, err := h.docs.GenerateSearchIndex()
diff --git a/internal/docs/navigation.go b/internal/docs/navigation.go
index 3f682b1c..21efa2b3 100644
--- a/internal/docs/navigation.go
+++ b/internal/docs/navigation.go
@@ -10,8 +10,177 @@ import (
 	"golang.org/x/text/language"
 )
 
-// BuildNavigation creates the navigation structure from the docs filesystem
-func (h *DocsHandler) BuildNavigation() *templates.Navigation {
+// sectionOrder defines the sidebar's top-level categories, top to bottom.
+// The docs directory layout IS the navigation structure: top-level
+// directories map to sections, nested directories map to subcategory
+// groups (see placeDoc for the routing rules).
+var sectionOrder = []struct {
+	Title string
+	Icon  string
+}{
+	{Title: "Getting Started", Icon: "book-open"},
+	{Title: "User Guide", Icon: "book"},
+	{Title: "API Reference", Icon: "list"},
+	{Title: "Developer", Icon: "gear"},
+	{Title: "Operations", Icon: "database"},
+	{Title: "Contributing", Icon: "heart"},
+}
+
+// groupTitleOverrides fixes casing that naive title-casing gets wrong.
+var groupTitleOverrides = map[string]string{
+	"admin":     "Admin",
+	"api":       "API",
+	"kobo":      "Kobo",
+	"koreader":  "KOReader",
+	"opds":      "OPDS",
+	"websocket": "WebSocket",
+}
+
+// docTitleOverrides pins exact nav titles for files whose filename reads
+// poorly (or which serve as a landing page). Keyed by doc path; "index.md"
+// covers every subdirectory index page.
+var docTitleOverrides = map[string]string{
+	"index.md":                                  "Overview",
+	"contract_pins.md":                          "Contract Pins",
+	"FRONTEND_INTEGRATION.md":                   "Frontend Integration",
+	"user/user-guide.md":                        "User Guide",
+	"user/sync-guide.md":                        "Sync Guide",
+	"user/devices/kobo-setup.md":                "Kobo Setup",
+	"user/devices/koreader-setup.md":            "KOReader Setup",
+	"user/devices/android-app.md":               "Android App",
+	"developer/development.md":                  "Developer Portal",
+	"developer/api/api-reference.md":            "Overview",
+	"operations/operations.md":                  "Operations Guide",
+	"operations/troubleshooting.md":             "Troubleshooting",
+	"contributing/contributing.md":              "Contributing",
+	"contributing/development.md":               "Development Guide",
+	"development/calibre-opf-implementation.md": "Calibre OPF Implementation",
+}
+
+// navPlacement routes one document into (section, group). An empty group
+// means the doc sits directly in the section; a negative pin forces the doc
+// to the front of its list (landing pages like the root Overview).
+type navPlacement struct {
+	section string
+	group   string
+	pin     int
+}
+
+// placeDoc maps a doc path to its sidebar location.
+func placeDoc(docPath string) navPlacement {
+	// Root landing page.
+	if docPath == "index.md" {
+		return navPlacement{section: "Getting Started", pin: -100}
+	}
+	// Stray root-level dev notes → Developer → Reference group.
+	if !strings.Contains(docPath, "/") {
+		return navPlacement{section: "Developer", group: "Reference"}
+	}
+	if strings.HasPrefix(docPath, "development/") {
+		return navPlacement{section: "Developer", group: "Reference"}
+	}
+
+	// Subdirectory index pages pin to the front of their group as "Overview".
+	pin := 0
+	if strings.HasSuffix(docPath, "/index.md") {
+		pin = -50
+	}
+
+	switch {
+	case strings.HasPrefix(docPath, "user/"):
+		rest := strings.TrimPrefix(docPath, "user/")
+		if dir, _, ok := strings.Cut(rest, "/"); ok {
+			// Subdirectories become subcategories: device setup gets its
+			// own group, the admin-facing guides another.
+			if dir == "devices" {
+				return navPlacement{section: "User Guide", group: "Devices", pin: pin}
+			}
+			return navPlacement{section: "User Guide", group: titleCase(dir), pin: pin}
+		}
+		if rest == "user-guide.md" {
+			return navPlacement{section: "User Guide", pin: -50}
+		}
+		if strings.HasPrefix(rest, "admin-") {
+			return navPlacement{section: "User Guide", group: "Administration"}
+		}
+		return navPlacement{section: "User Guide"}
+
+	case strings.HasPrefix(docPath, "developer/api/"):
+		rest := strings.TrimPrefix(docPath, "developer/api/")
+		if dir, _, ok := strings.Cut(rest, "/"); ok {
+			return navPlacement{section: "API Reference", group: groupTitle(dir), pin: pin}
+		}
+		if rest == "api-reference.md" {
+			return navPlacement{section: "API Reference", pin: -50}
+		}
+		return navPlacement{section: "API Reference"}
+
+	case strings.HasPrefix(docPath, "developer/"):
+		rest := strings.TrimPrefix(docPath, "developer/")
+		if dir, _, ok := strings.Cut(rest, "/"); ok {
+			return navPlacement{section: "Developer", group: groupTitle(dir), pin: pin}
+		}
+		if rest == "development.md" {
+			return navPlacement{section: "Developer", pin: -50}
+		}
+		return navPlacement{section: "Developer"}
+
+	case strings.HasPrefix(docPath, "operations/"):
+		if docPath == "operations/operations.md" {
+			return navPlacement{section: "Operations", pin: -50}
+		}
+		return navPlacement{section: "Operations"}
+
+	case strings.HasPrefix(docPath, "contributing/"):
+		if docPath == "contributing/contributing.md" {
+			return navPlacement{section: "Contributing", pin: -50}
+		}
+		return navPlacement{section: "Contributing"}
+
+	default:
+		return navPlacement{section: "Developer", group: "Reference"}
+	}
+}
+
+// groupTitle turns a directory name into a subcategory title.
+func groupTitle(dir string) string {
+	if title, ok := groupTitleOverrides[dir]; ok {
+		return title
+	}
+	return titleCase(dir)
+}
+
+// titleCase converts "book-matching"/"media_items" to "Book Matching".
+func titleCase(s string) string {
+	s = strings.NewReplacer("-", " ", "_", " ").Replace(s)
+	return cases.Title(language.English).String(s)
+}
+
+// docTitle returns the nav label for a document.
+func docTitle(docPath string) string {
+	if title, ok := docTitleOverrides[docPath]; ok {
+		return title
+	}
+	filename := docPath[strings.LastIndex(docPath, "/")+1:]
+	if filename == "index.md" {
+		return "Overview"
+	}
+	return titleCase(strings.TrimSuffix(filename, ".md"))
+}
+
+// docURL converts a doc path to its site URL. The root index lives at /docs.
+func docURL(docPath string) string {
+	if docPath == "index.md" {
+		return "/docs"
+	}
+	return "/docs/" + strings.TrimSuffix(docPath, ".md")
+}
+
+// BuildNavigation creates the category → subcategory navigation from the
+// docs filesystem. The section and group containing currentPath render
+// expanded; everything else starts collapsed (with Getting Started as the
+// fallback when nothing matches).
+func (h *DocsHandler) BuildNavigation(currentPath string) *templates.Navigation {
 	docs, err := h.ListDocuments()
 	if err != nil {
 		// Return minimal navigation on error
@@ -19,6 +188,7 @@ func (h *DocsHandler) BuildNavigation() *templates.Navigation {
 			Sections: []templates.NavSection{
 				{
 					Title: "Getting Started",
+					Icon:  "book-open",
 					Items: []templates.NavItem{
 						{Title: "Overview", URL: "/docs"},
 					},
@@ -27,223 +197,138 @@ func (h *DocsHandler) BuildNavigation() *templates.Navigation {
 		}
 	}
 
-	// Group documents by category
-	categories := make(map[string][]templates.NavItem)
+	type groupBuild struct {
+		items    []templates.NavItem
+		urls     []string
+		overview bool // has a pinned index page
+	}
+	type sectionBuild struct {
+		items    []templates.NavItem
+		urls     []string
+		pinned   map[string]bool // landing pages lead their section
+		groups   map[string]*groupBuild
+		overview bool
+	}
+
+	builds := make(map[string]*sectionBuild, len(sectionOrder))
+	for _, spec := range sectionOrder {
+		builds[spec.Title] = &sectionBuild{groups: make(map[string]*groupBuild), pinned: make(map[string]bool)}
+	}
 
 	for _, doc := range docs {
-		// Skip INDEX.md files in subdirectories (they're section landing pages, not nav items)
-		// Only show root INDEX.md, skip all others like user/INDEX.md, api/INDEX.md, etc.
-		if strings.HasSuffix(doc, "index.md") && doc != "index.md" {
+		// ListDocuments returns paths without the .md extension; the
+		// routing/title helpers key on full doc paths.
+		docPath := doc + ".md"
+		place := placeDoc(docPath)
+		build, ok := builds[place.section]
+		if !ok {
 			continue
 		}
-
-		item := h.createNavItem(doc)
-		category := h.getCategoryForNav(doc)
-		categories[category] = append(categories[category], item)
-	}
-
-	// Build navigation sections
-	var sections []templates.NavSection
-
-	// Define section order
-	sectionOrder := []string{
-		"Getting Started",
-		"User Guide",
-		"Device Setup",
-		"API Reference",
-		"Contributing",
-	}
-
-	// Add sections in order
-	for _, sectionTitle := range sectionOrder {
-		if items, exists := categories[sectionTitle]; exists {
-			sections = append(sections, templates.NavSection{
-				Title:     sectionTitle,
-				Items:     items,
-				Collapsed: sectionTitle != "Getting Started", // Expand first section
-			})
-			delete(categories, sectionTitle)
+		item := templates.NavItem{Title: docTitle(docPath), URL: docURL(docPath)}
+		if place.group == "" {
+			build.items = append(build.items, item)
+			build.urls = append(build.urls, item.URL)
+			if place.pin < 0 {
+				build.pinned[item.URL] = true
+			}
+			if place.pin == -100 {
+				// Only the root Overview forces its section open.
+				build.overview = true
+			}
+		} else {
+			group, ok := build.groups[place.group]
+			if !ok {
+				group = &groupBuild{}
+				build.groups[place.group] = group
+			}
+			group.items = append(group.items, item)
+			group.urls = append(group.urls, item.URL)
+			if place.pin < 0 {
+				group.overview = true
+			}
 		}
 	}
 
-	// Add any remaining sections
-	for title, items := range categories {
-		sections = append(sections, templates.NavSection{
-			Title:     title,
-			Items:     items,
-			Collapsed: true,
+	nav := &templates.Navigation{}
+	for _, spec := range sectionOrder {
+		build := builds[spec.Title]
+		section := templates.NavSection{Title: spec.Title, Icon: spec.Icon}
+
+		// Direct items: pinned landing pages lead, then alphabetical
+		// (case-insensitive — KOReader must not sort before Kobo).
+		items := append([]templates.NavItem(nil), build.items...)
+		sort.SliceStable(items, func(i, j int) bool {
+			pi, pj := build.pinned[items[i].URL], build.pinned[items[j].URL]
+			if pi != pj {
+				return pi
+			}
+			return strings.ToLower(items[i].Title) < strings.ToLower(items[j].Title)
 		})
-	}
+		section.Items = items
 
-	return &templates.Navigation{Sections: sections}
-}
-
-// createNavItem creates a navigation item from a document path
-func (h *DocsHandler) createNavItem(docPath string) templates.NavItem {
-	title := h.getDocTitle(docPath)
-	url := "/docs/" + strings.TrimSuffix(docPath, ".md")
-	icon := h.getDocIcon(docPath)
-
-	return templates.NavItem{
-		Title: title,
-		URL:   url,
-		Icon:  icon,
-	}
-}
-
-// getDocTitle extracts a readable title from a document path
-func (h *DocsHandler) getDocTitle(docPath string) string {
-	// Remove .md extension
-	title := strings.TrimSuffix(docPath, ".md")
-
-	// Split by /
-	parts := strings.Split(title, "/")
-
-	// Get the last part (filename)
-	filename := parts[len(parts)-1]
-
-	// Convert to title case
-	title = cases.Title(language.English).String(strings.ReplaceAll(filename, "-", " "))
-
-	// Handle special cases
-	switch filename {
-	case "index.md":
-		return "Index"
-	case "user/user-guide.md":
-		return "User Guide"
-	case "developer/development.md":
-		return "Developer Portal"
-	case "operations/operations.md":
-		return "Operations Guide"
-	case "contributing/contributing.md":
-		return "Contributing"
-	case "developer/api-reference.md":
-		return "API Reference"
-	case "developer/api/api-reference.md":
-		return "API Reference"
-	case "developer/api/collections-api.md":
-		return "Collections API"
-	case "developer/websocket-api.md":
-		return "WebSocket API"
-	case "operations/troubleshooting.md":
-		return "Troubleshooting"
-	case "user/sync-guide.md":
-		return "Sync Guide"
-	case "user/devices/kobo-setup.md":
-		return "Kobo Setup"
-	case "user/devices/koreader-setup.md":
-		return "KOReader Setup"
-	case "DEVELOPMENT.md":
-		return "Development Guide"
-	}
-
-	return title
-}
-
-// getDocIcon returns an appropriate icon for a document
-func (h *DocsHandler) getDocIcon(docPath string) string {
-	if strings.Contains(docPath, "api") || strings.Contains(docPath, "API") {
-		return "🔌"
-	}
-	if strings.Contains(docPath, "device") {
-		return "📱"
-	}
-	if strings.Contains(docPath, "sync") || strings.Contains(docPath, "SYNC") {
-		return "🔄"
-	}
-	if strings.Contains(docPath, "contributing") || strings.Contains(docPath, "DEVELOPMENT") {
-		return "🛠️"
-	}
-	if strings.Contains(docPath, "index") {
-		return "📚"
-	}
-	if strings.Contains(docPath, "troubleshooting") {
-		return "🔧"
-	}
-	return "📄"
-}
-
-// getCategoryForNav determines the navigation category for a document
-func (h *DocsHandler) getCategoryForNav(docPath string) string {
-	// API documentation
-	if strings.Contains(docPath, "api") || strings.Contains(docPath, "API") {
-		return "API Reference"
-	}
-
-	// Device setup
-	if strings.HasPrefix(docPath, "devices/") {
-		return "Device Setup"
-	}
-
-	// Contributing
-	if strings.HasPrefix(docPath, "contributing/") {
-		return "Contributing"
-	}
-
-	// Core user documentation
-	docName := strings.ToLower(docPath)
-	switch {
-	case strings.Contains(docName, "sync"):
-		return "User Guide"
-	case strings.Contains(docName, "troubleshoot"):
-		return "Getting Started"
-	case strings.Contains(docName, "index"):
-		return "Getting Started"
-	default:
-		return "Getting Started"
-	}
-}
-
-// GetAPIEndpoints returns a list of API endpoints for the API documentation
-func (h *DocsHandler) GetAPIEndpoints() []APIEndpoint {
-	// This would be better auto-generated from Go code comments
-	// For now, return a static list based on your API
-	endpoints := []APIEndpoint{
-		// Authentication
-		{Method: "POST", Path: "/api/auth/register", Category: "Authentication", Title: "Register User"},
-		{Method: "POST", Path: "/api/auth/login", Category: "Authentication", Title: "Login"},
-		{Method: "POST", Path: "/api/auth/refresh", Category: "Authentication", Title: "Refresh Token"},
-		{Method: "POST", Path: "/api/auth/logout", Category: "Authentication", Title: "Logout"},
-
-		// Users
-		{Method: "GET", Path: "/api/users/me", Category: "Users", Title: "Get Current User"},
-		{Method: "PUT", Path: "/api/users/me/profile", Category: "Users", Title: "Update Profile"},
-		{Method: "PUT", Path: "/api/users/me/theme", Category: "Users", Title: "Update Theme"},
-		{Method: "PUT", Path: "/api/users/me/password", Category: "Users", Title: "Change Password"},
-
-		// Libraries
-		{Method: "GET", Path: "/api/libraries/visible", Category: "Libraries", Title: "Get Visible Libraries"},
-		{Method: "GET", Path: "/api/libraries/{id}", Category: "Libraries", Title: "Get Library Details"},
-		{Method: "POST", Path: "/api/libraries", Category: "Libraries", Title: "Create Library"},
-
-		// Media Items
-		{Method: "GET", Path: "/api/media-items", Category: "Media Items", Title: "List Media Items"},
-		{Method: "GET", Path: "/api/media-items/{id}", Category: "Media Items", Title: "Get Media Item"},
-		{Method: "POST", Path: "/api/media-items/search", Category: "Media Items", Title: "Search Media Items"},
-
-		// Progress
-		{Method: "GET", Path: "/api/media-items/{id}/progress", Category: "Progress", Title: "Get Reading Progress"},
-		{Method: "PUT", Path: "/api/media-items/{id}/progress", Category: "Progress", Title: "Update Reading Progress"},
-
-		// Devices
-		{Method: "POST", Path: "/api/devices/register", Category: "Devices", Title: "Register Device"},
-		{Method: "GET", Path: "/api/devices", Category: "Devices", Title: "List User Devices"},
-		{Method: "DELETE", Path: "/api/devices/{id}", Category: "Devices", Title: "Revoke Device"},
-	}
-
-	sort.Slice(endpoints, func(i, j int) bool {
-		if endpoints[i].Category == endpoints[j].Category {
-			return endpoints[i].Title < endpoints[j].Title
+		// Groups: alphabetical, each group's items alphabetical with the
+		// group's "Overview" (index page) first.
+		groupTitles := make([]string, 0, len(build.groups))
+		for title := range build.groups {
+			groupTitles = append(groupTitles, title)
+		}
+		sort.Strings(groupTitles)
+		for _, title := range groupTitles {
+			group := build.groups[title]
+			gItems := append([]templates.NavItem(nil), group.items...)
+			sort.SliceStable(gItems, func(i, j int) bool {
+				return strings.ToLower(gItems[i].Title) < strings.ToLower(gItems[j].Title)
+			})
+			if group.overview {
+				sort.SliceStable(gItems, func(i, j int) bool { return gItems[i].Title == "Overview" })
+			}
+			section.Groups = append(section.Groups, templates.NavGroup{
+				Title:     title,
+				Items:     gItems,
+				Collapsed: !containsURL(currentPath, group.urls),
+			})
 		}
-		return endpoints[i].Category < endpoints[j].Category
-	})
 
-	return endpoints
+		if len(section.Items) == 0 && len(section.Groups) == 0 {
+			continue
+		}
+		section.Collapsed = !containsURL(currentPath, build.urls)
+		if section.Collapsed {
+			for _, g := range section.Groups {
+				if !g.Collapsed {
+					section.Collapsed = false
+					break
+				}
+			}
+		}
+		if build.overview {
+			section.Collapsed = false
+		}
+		nav.Sections = append(nav.Sections, section)
+	}
+
+	// Nothing matches the current page (404, search landing): open the
+	// first section so the sidebar doesn't render fully closed.
+	anyOpen := false
+	for _, s := range nav.Sections {
+		if !s.Collapsed {
+			anyOpen = true
+			break
+		}
+	}
+	if !anyOpen && len(nav.Sections) > 0 {
+		nav.Sections[0].Collapsed = false
+	}
+
+	return nav
 }
 
-type APIEndpoint struct {
-	Method   string
-	Path     string
-	Category string
-	Title    string
+// containsURL reports whether currentPath is one of the given doc URLs.
+func containsURL(currentPath string, urls []string) bool {
+	for _, u := range urls {
+		if currentPath == u {
+			return true
+		}
+	}
+	return false
 }
diff --git a/internal/docs/navigation_test.go b/internal/docs/navigation_test.go
new file mode 100644
index 00000000..fd726e21
--- /dev/null
+++ b/internal/docs/navigation_test.go
@@ -0,0 +1,205 @@
+package docs
+
+import (
+	"os"
+	"path/filepath"
+	"testing"
+
+	"bookhoard/templates"
+)
+
+func TestPlaceDoc(t *testing.T) {
+	tests := []struct {
+		path    string
+		section string
+		group   string
+		pinned  bool
+	}{
+		{"index.md", "Getting Started", "", true},
+		{"user/user-guide.md", "User Guide", "", true},
+		{"user/dashboard.md", "User Guide", "", false},
+		{"user/admin-guide.md", "User Guide", "Administration", false},
+		{"user/devices/kobo-setup.md", "User Guide", "Devices", false},
+		{"developer/api/api-reference.md", "API Reference", "", true},
+		{"developer/api/dashboard.md", "API Reference", "", false},
+		{"developer/api/authentication/login.md", "API Reference", "Authentication", false},
+		{"developer/api/saved-filters/index.md", "API Reference", "Saved Filters", true},
+		{"developer/testing.md", "Developer", "", false},
+		{"developer/development.md", "Developer", "", true},
+		{"developer/scanner/audio-metadata.md", "Developer", "Scanner", false},
+		{"contract_pins.md", "Developer", "Reference", false},
+		{"FRONTEND_INTEGRATION.md", "Developer", "Reference", false},
+		{"development/calibre-opf-implementation.md", "Developer", "Reference", false},
+		{"operations/operations.md", "Operations", "", true},
+		{"operations/troubleshooting.md", "Operations", "", false},
+		{"contributing/contributing.md", "Contributing", "", true},
+		{"contributing/development.md", "Contributing", "", false},
+	}
+
+	for _, tt := range tests {
+		got := placeDoc(tt.path)
+		if got.section != tt.section || got.group != tt.group {
+			t.Errorf("placeDoc(%q) = (%q, %q), want (%q, %q)",
+				tt.path, got.section, got.group, tt.section, tt.group)
+		}
+		if (got.pin < 0) != tt.pinned {
+			t.Errorf("placeDoc(%q) pin = %d, pinned want %v", tt.path, got.pin, tt.pinned)
+		}
+	}
+}
+
+func TestDocTitle(t *testing.T) {
+	tests := map[string]string{
+		"index.md":                                 "Overview",
+		"user/user-guide.md":                       "User Guide",
+		"user/devices/koreader-setup.md":           "KOReader Setup",
+		"developer/development.md":                 "Developer Portal",
+		"developer/api/api-reference.md":           "Overview",
+		"developer/api/users/update_profile.md":    "Update Profile",
+		"developer/api/book-matching/link_book.md": "Link Book",
+		"operations/troubleshooting.md":            "Troubleshooting",
+		"contract_pins.md":                         "Contract Pins",
+	}
+	for path, want := range tests {
+		if got := docTitle(path); got != want {
+			t.Errorf("docTitle(%q) = %q, want %q", path, got, want)
+		}
+	}
+}
+
+func TestDocURL(t *testing.T) {
+	if got := docURL("index.md"); got != "/docs" {
+		t.Errorf("docURL(index.md) = %q, want /docs", got)
+	}
+	if got := docURL("user/sync-guide.md"); got != "/docs/user/sync-guide" {
+		t.Errorf("docURL = %q, want /docs/user/sync-guide", got)
+	}
+}
+
+// buildTestDocs creates a representative docs tree in a temp dir and returns
+// a handler over it.
+func buildTestDocs(t *testing.T) *DocsHandler {
+	t.Helper()
+	dir := t.TempDir()
+	files := []string{
+		"index.md",
+		"user/user-guide.md",
+		"user/dashboard.md",
+		"user/admin-guide.md",
+		"user/devices/kobo-setup.md",
+		"user/devices/koreader-setup.md",
+		"developer/api/api-reference.md",
+		"developer/api/authentication/login.md",
+		"developer/api/authentication/overview.md",
+		"developer/api/saved-filters/index.md",
+		"developer/testing.md",
+		"operations/troubleshooting.md",
+		"contributing/development.md",
+		"contract_pins.md",
+	}
+	for _, f := range files {
+		path := filepath.Join(dir, f)
+		if err := os.MkdirAll(filepath.Dir(path), 0o755); err != nil {
+			t.Fatal(err)
+		}
+		if err := os.WriteFile(path, []byte("# Test\n"), 0o644); err != nil {
+			t.Fatal(err)
+		}
+	}
+	return &DocsHandler{docsFS: os.DirFS(dir), docsPath: dir}
+}
+
+func TestBuildNavigation(t *testing.T) {
+	h := buildTestDocs(t)
+
+	// Current page: a device setup guide → User Guide section and its
+	// Devices group must render expanded; everything else collapsed.
+	nav := h.BuildNavigation("/docs/user/devices/kobo-setup")
+	if len(nav.Sections) == 0 {
+		t.Fatal("no sections built")
+	}
+
+	wantOrder := []string{"Getting Started", "User Guide", "API Reference", "Developer", "Operations", "Contributing"}
+	for i, want := range wantOrder {
+		if nav.Sections[i].Title != want {
+			t.Fatalf("section %d = %q, want %q", i, nav.Sections[i].Title, want)
+		}
+	}
+
+	getting := nav.Sections[0]
+	if getting.Collapsed {
+		t.Error("Getting Started should be expanded (root overview pinned)")
+	}
+	if len(getting.Items) != 1 || getting.Items[0].Title != "Overview" || getting.Items[0].URL != "/docs" {
+		t.Errorf("Getting Started items = %+v, want single Overview → /docs", getting.Items)
+	}
+
+	userGuide := nav.Sections[1]
+	if userGuide.Collapsed {
+		t.Error("User Guide should be expanded: it contains the current page")
+	}
+	if len(userGuide.Items) != 2 || userGuide.Items[0].Title != "User Guide" {
+		t.Errorf("User Guide direct items = %+v, want User Guide pinned first", userGuide.Items)
+	}
+	var devices *templates.NavGroup
+	for i := range userGuide.Groups {
+		if userGuide.Groups[i].Title == "Devices" {
+			devices = &userGuide.Groups[i]
+		}
+	}
+	if devices == nil {
+		t.Fatal("User Guide has no Devices group")
+	}
+	if devices.Collapsed {
+		t.Error("Devices group should be expanded: it contains the current page")
+	}
+	if len(devices.Items) != 2 || devices.Items[0].Title != "Kobo Setup" {
+		t.Errorf("Devices items = %+v, want Kobo Setup + KOReader Setup", devices.Items)
+	}
+
+	// Everything else starts collapsed.
+	for _, s := range nav.Sections[2:] {
+		if !s.Collapsed {
+			t.Errorf("section %q should be collapsed (current page is elsewhere)", s.Title)
+		}
+	}
+
+	// API Reference: subdirectory groups with the index page as Overview.
+	api := nav.Sections[2]
+	if len(api.Groups) != 2 {
+		t.Fatalf("API Reference groups = %d, want 2 (Authentication, Saved Filters)", len(api.Groups))
+	}
+	if api.Groups[0].Title != "Authentication" || len(api.Groups[0].Items) != 2 {
+		t.Errorf("Authentication group = %+v", api.Groups[0])
+	}
+	saved := api.Groups[1]
+	if saved.Title != "Saved Filters" || len(saved.Items) != 1 || saved.Items[0].Title != "Overview" {
+		t.Errorf("Saved Filters group = %+v, want single Overview item", saved)
+	}
+	if !saved.Collapsed {
+		t.Error("Saved Filters group should be collapsed on an unrelated page")
+	}
+
+	// Stray root files land in Developer → Reference.
+	dev := nav.Sections[3]
+	if len(dev.Groups) != 1 || dev.Groups[0].Title != "Reference" {
+		t.Errorf("Developer groups = %+v, want Reference", dev.Groups)
+	}
+}
+
+func TestBuildNavigationNothingCurrent(t *testing.T) {
+	h := buildTestDocs(t)
+	nav := h.BuildNavigation("/docs/nonexistent")
+	open := 0
+	for _, s := range nav.Sections {
+		if !s.Collapsed {
+			open++
+		}
+	}
+	if open != 1 {
+		t.Errorf("expected exactly one section open on a 404 path, got %d", open)
+	}
+	if nav.Sections[0].Collapsed {
+		t.Error("fallback should open the first section")
+	}
+}
diff --git a/internal/router/docs.go b/internal/router/docs.go
index 60af358f..7fab5ae9 100644
--- a/internal/router/docs.go
+++ b/internal/router/docs.go
@@ -6,8 +6,17 @@ import (
 
 func registerDocumentationRoutes(cfg *Config) {
 	docsHandler := docs.NewHTTPHandler("docs")
-	cfg.Echo.GET("/docs", docsHandler.DocsHome)
-	cfg.Echo.GET("/docs/*", docsHandler.ShowDocumentation)
+
+	// Docs render for anonymous AND signed-in visitors (it's the pre-login
+	// surface for setup/troubleshooting), so the HTML routes use the optional
+	// auth middleware: handlers get a populated user when a valid token is
+	// present, nil otherwise. The JSON/partial endpoints are public.
+	docsAuth := createOptionalAuthMiddleware(cfg)
+	cfg.Echo.GET("/docs", docsHandler.DocsHome, docsAuth)
+	cfg.Echo.GET("/docs/*", docsHandler.ShowDocumentation, docsAuth)
+
+	// Server-rendered search results partial (swapped in by web/src/docs.ts).
+	cfg.Echo.GET("/docs/search/partial", docsHandler.SearchPartial)
 	cfg.Echo.GET("/docs/api/search", docsHandler.Search)
 	cfg.Echo.GET("/docs/search-index.json", docsHandler.ServeSearchIndex)
 }
diff --git a/internal/router/frontend.go b/internal/router/frontend.go
index 01019e8b..711027f5 100644
--- a/internal/router/frontend.go
+++ b/internal/router/frontend.go
@@ -706,9 +706,9 @@ func registerFrontendRoutes(cfg *Config) {
 		books, libRes, isSmart, errCode := cfg.loadCollectionBooks(c, user, collection, collectionID)
 		if errCode != "" {
 			msg := map[string]string{
-				"books_load_error":  "Error loading books",
+				"books_load_error":   "Error loading books",
 				"invalid_library_id": "Invalid library ID",
-				"invalid_id":        "Invalid collection ID",
+				"invalid_id":         "Invalid collection ID",
 			}[errCode]
 			return renderErrorPage(c, msg, errCode)
 		}
diff --git a/internal/router/router.go b/internal/router/router.go
index 9b2b0908..af747730 100644
--- a/internal/router/router.go
+++ b/internal/router/router.go
@@ -95,6 +95,66 @@ func (cfg *Config) getBaseURL(ctx context.Context) string {
 	return baseURL
 }
 
+// createOptionalAuthMiddleware parses the JWT when one is present but never
+// rejects the request: pages rendered for both anonymous and signed-in
+// visitors (the documentation) use it so handlers see a populated "user"
+// when a valid token exists and nil otherwise.
+//
+// This is deliberately NOT echojwt: its ErrorHandler's return value ends the
+// chain, so "return nil" for a missing token would abort the request with an
+// empty 200 instead of continuing (that shipped once — every /docs page came
+// back blank). A ghost-session token authenticates as nobody, same rule as
+// the required middleware minus the redirect.
+func createOptionalAuthMiddleware(cfg *Config) echo.MiddlewareFunc {
+	return func(next echo.HandlerFunc) echo.HandlerFunc {
+		return func(c *echo.Context) error {
+			tokenString := ""
+			if cookie, err := c.Cookie("token"); err == nil && cookie.Value != "" {
+				tokenString = cookie.Value
+			} else if auth := c.Request().Header.Get("Authorization"); strings.HasPrefix(auth, "Bearer ") {
+				tokenString = strings.TrimPrefix(auth, "Bearer ")
+			}
+			if tokenString == "" {
+				return next(c) // anonymous
+			}
+
+			token, err := jwt.Parse(tokenString, func(t *jwt.Token) (any, error) {
+				if _, ok := t.Method.(*jwt.SigningMethodHMAC); !ok {
+					return nil, jwt.ErrSignatureInvalid
+				}
+				return []byte(cfg.Cfg.JWTSecret), nil
+			})
+			if err != nil || !token.Valid {
+				return next(c) // invalid/expired → anonymous
+			}
+			claims, ok := token.Claims.(jwt.MapClaims)
+			if !ok {
+				return next(c)
+			}
+
+			userIDStr, _ := claims["user_id"].(string)
+			userUUID, err := uuid.Parse(userIDStr)
+			if err != nil {
+				return next(c)
+			}
+
+			liveUser, exists := fetchLiveUser(cfg, userUUID)
+			if !exists {
+				return next(c) // ghost session → anonymous
+			}
+
+			c.Set("user", database.Users{
+				ID:       pgtype.UUID{Bytes: userUUID, Valid: true},
+				Email:    claims["user_email"].(string),
+				Username: claims["user_username"].(string),
+				Role:     claims["user_role"].(string),
+				Timezone: liveUser.Timezone,
+			})
+			return next(c)
+		}
+	}
+}
+
 // createJWTMiddleware creates a JWT middleware with proper user context setup
 func createJWTMiddleware(cfg *Config) echo.MiddlewareFunc {
 	return echojwt.WithConfig(echojwt.Config{
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 31ddd7e1..b2534ffd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -118,9 +118,28 @@ const config: Config = {
         "wood-mahogany": "url('/static/textures/wood-mahogany.png')",
       },
       typography: ({ theme }) => ({
-        invert: {
+        // Docs pages use plain `prose`; bind its palette to the theme
+        // variables so markdown renders correctly under dark AND light
+        // themes (the old layout hardcoded prose-invert, which painted
+        // light-on-dark text even under light themes).
+        DEFAULT: {
           css: {
+            "--tw-prose-body": "var(--text-primary)",
+            "--tw-prose-headings": "var(--text-primary)",
+            "--tw-prose-lead": "var(--text-secondary)",
+            "--tw-prose-links": "var(--accent)",
+            "--tw-prose-bold": "var(--text-primary)",
+            "--tw-prose-counters": "var(--text-secondary)",
+            "--tw-prose-bullets": "var(--accent)",
+            "--tw-prose-hr": "var(--border)",
+            "--tw-prose-quotes": "var(--text-secondary)",
+            "--tw-prose-quote-borders": "var(--accent)",
+            "--tw-prose-captions": "var(--text-secondary)",
+            "--tw-prose-code": "var(--text-primary)",
+            "--tw-prose-pre-code": "var(--text-primary)",
             "--tw-prose-pre-bg": "var(--bg-secondary)",
+            "--tw-prose-th-borders": "var(--border)",
+            "--tw-prose-td-borders": "var(--border)",
             code: {
               backgroundColor: "var(--bg-primary)",
               color: "var(--text-primary)",
diff --git a/templates/docs.templ b/templates/docs.templ
index 08f37311..da7f4c08 100644
--- a/templates/docs.templ
+++ b/templates/docs.templ
@@ -2,88 +2,50 @@ package templates
 
 import "fmt"
 
+// DocsLayout renders the standalone documentation site: a docs-owned topbar
+// (search, theme picker, Open App), a docs-only sidebar with category →
+// subcategory navigation, and the markdown content.
+//
+// It deliberately does NOT embed the app Header: docs are a public surface
+// (setup and troubleshooting happen pre-login), and the app chrome assumed a
+// signed-in user — it rendered a sign-in form that silently degraded into a
+// native GET submit (credentials into the URL) because this page never loaded
+// htmx. Signed-out visitors get a plain "Sign in" LINK here; the form lives
+// on /login where it belongs.
 templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 	<!DOCTYPE html>
-	<html lang="en" class="dark">
+	<html lang="en">
 		<head>
+			@ThemeFlashGuard()
 			<meta charset="UTF-8"/>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 			<title>{ doc.Title } - Bookhoard Documentation</title>
 			<link href="/static/style.css" rel="stylesheet"/>
 			<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
-			<link rel="stylesheet" href="/static/highlight-dark.min.css"/>
 		</head>
-		<body x-data="docs" x-init="initializeSearch(); highlightCurrentPage(); initializeCodeCopyButtons()" class={ "theme-" + user.Theme + " page-docs font-sans antialiased" }>
-			@Header(user, currentPath)
-			<button
-				class="lg:hidden icon-btn fixed top-[4.75rem] left-4 z-50 bg-surface-raised"
-				onclick="toggleSidebar()"
-				aria-label="Toggle documentation menu"
-			>
-				@Icon("menu", "h-5 w-5")
-			</button>
-			<div id="docs-overlay" class="hidden fixed inset-0 z-40 lg:hidden" style="background: var(--surface-overlay);" onclick="toggleSidebar()"></div>
-			<div id="search-results" class="hidden fixed inset-0 z-50 overflow-y-auto p-8" style="background: var(--surface-overlay);"></div>
-			<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-				<div class="flex gap-8 py-8">
-					<aside id="docs-sidebar" class="sidebar fixed lg:sticky top-16 lg:top-20 bottom-0 lg:bottom-auto left-0 lg:left-auto z-40 lg:z-10 w-64 shrink-0 lg:h-[calc(100vh-6rem)] overflow-y-auto -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out bg-surface-raised border-r border-line lg:border-r-0">
-						<div class="p-4 border-b border-line">
-							<div class="relative">
-								<span class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" style="color: var(--text-secondary);">
-									@Icon("search", "h-4 w-4")
-								</span>
-								<input
-									type="text"
-									class="search-input input pl-9"
-									placeholder="Search documentation…"
-									id="docs-search"
-								/>
-							</div>
-						</div>
-						for _, section := range nav.Sections {
-							<div class="nav-section border-b border-line">
-								<div
-									class="nav-section-title flex items-center justify-between px-4 py-3 cursor-pointer select-none text-xs uppercase tracking-wider font-semibold transition-colors hover:bg-surface-hover"
-									style="color: var(--text-secondary);"
-									@click="toggleSection($el)"
-								>
-									<span>{ section.Title }</span>
-									@Icon("chevron-down", "h-4 w-4 section-arrow transition-transform")
-								</div>
-								if section.Collapsed {
-									<div class="nav-items hidden" data-collapsed="true">
-										for _, item := range section.Items {
-											<a href={ item.URL } class="nav-item flex items-center gap-2 py-2 pl-8 pr-4 text-sm no-underline transition-colors hover:bg-surface-hover" style="color: var(--text-secondary);">
-												<span class="text-xs" style="color: var(--accent);">{ item.Icon }</span>
-												<span>{ item.Title }</span>
-											</a>
-										}
-									</div>
-								} else {
-									<div class="nav-items" data-collapsed="false">
-										for _, item := range section.Items {
-											<a href={ item.URL } class="nav-item flex items-center gap-2 py-2 pl-8 pr-4 text-sm no-underline transition-colors hover:bg-surface-hover" style="color: var(--text-secondary);">
-												<span class="text-xs" style="color: var(--accent);">{ item.Icon }</span>
-												<span>{ item.Title }</span>
-											</a>
-										}
-									</div>
-								}
-							</div>
-						}
-					</aside>
-					<main class="main-content flex-1 min-w-0 max-w-4xl">
+		<body x-data="docs" x-init="initializeSearch(); initializeCodeCopyButtons()" class={ "theme-" + user.Theme + " page-docs font-sans antialiased" }>
+			@DocsTopbar(user)
+			<!-- Mobile drawer backdrop -->
+			<div id="docs-overlay" class="hidden fixed inset-0 z-40 lg:hidden" style="background: var(--surface-overlay);" onclick="document.getElementById('docs-sidebar').classList.add('-translate-x-full'); this.classList.add('hidden')"></div>
+			<div class="flex">
+				@DocsSidebar(nav, currentPath)
+				<main class="flex-1 min-w-0">
+					<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-10">
 						if len(doc.Breadcrumb) > 0 {
-							<nav class="breadcrumb flex flex-wrap items-center gap-1.5 text-sm mb-8" aria-label="Breadcrumb" style="color: var(--text-secondary);">
+							<nav class="breadcrumb flex flex-wrap items-center gap-1.5 text-sm mb-6" aria-label="Breadcrumb" style="color: var(--text-secondary);">
 								for i, crumb := range doc.Breadcrumb {
 									if i > 0 {
 										@Icon("chevron-right", "h-4 w-4")
 									}
-									<a href={ crumb.URL } class="no-underline transition-colors hover:underline" style="color: var(--accent);">{ crumb.Title }</a>
+									if crumb.URL != "" {
+										<a href={ crumb.URL } class="no-underline transition-colors hover:underline" style="color: var(--accent);">{ crumb.Title }</a>
+									} else {
+										<span>{ crumb.Title }</span>
+									}
 								}
 							</nav>
 						}
-						<h1 class="text-4xl font-bold mb-8 tracking-tight" style="color: var(--text-primary);">{ doc.Title }</h1>
+						<h1 class="text-3xl sm:text-4xl font-bold mb-8 tracking-tight" style="color: var(--text-primary);">{ doc.Title }</h1>
 						if len(doc.TOC) > 0 {
 							<details class="toc card p-4 mb-8">
 								<summary class="cursor-pointer list-none [&::-webkit-details-marker]:hidden flex items-center gap-2 font-semibold transition-colors hover:bg-surface-hover -m-4 p-4 rounded-2xl" style="color: var(--text-primary);">
@@ -95,7 +57,7 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 										<a
 											href={ "#" + item.Anchor }
 											class="toc-item block py-1 text-sm no-underline transition-colors hover:text-brand"
-											style={ "margin-left: " + fmt.Sprintf("%drem", item.Level) + "; color: var(--text-secondary);" }
+											style={ "margin-left: " + fmt.Sprintf("%d", item.Level-2) + "rem; color: var(--text-secondary);" }
 										>
 											{ item.Title }
 										</a>
@@ -103,10 +65,221 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
 								</div>
 							</details>
 						}
-						<div class="prose prose-invert max-w-none">
+						<div class="prose max-w-none">
 							@UnsafeHTML(doc.Content).ToComponent()
 						</div>
-					</main>
+					</div>
+				</main>
+			</div>
+			<!-- module bundle; ?v=<stamp> busts stale intermediate builds -->
+			<script type="module" src="/static/main.js?v=7"></script>
+		</body>
+	</html>
+}
+
+// DocsTopbar is the docs site's own slim header. It never contains a login
+// form — anonymous visitors get a link to /login (the only place credentials
+// are posted from).
+templ DocsTopbar(user User) {
+	<header class="sticky top-0 z-30 h-14 shrink-0 border-b flex items-center gap-2 sm:gap-3 px-4 sm:px-6" style="background: var(--bg-primary); border-color: var(--border);">
+		<button
+			type="button"
+			class="lg:hidden icon-btn shrink-0"
+			@click="toggleSidebar()"
+			aria-label="Toggle documentation menu"
+		>
+			@Icon("menu", "h-5 w-5")
+		</button>
+		<a href="/docs" class="flex items-center gap-2 shrink-0 no-underline">
+			<span class="grid place-items-center" style="color: var(--accent);">
+				@Icon("book-open", "h-6 w-6")
+			</span>
+			<span class="hidden sm:inline font-bold text-lg tracking-tight" style="color: var(--text-primary);">Bookhoard</span>
+			<span class="text-xs font-semibold px-2 py-0.5 rounded-full" style="background: var(--accent-muted); color: var(--accent);">Docs</span>
+		</a>
+		<div class="flex-1"></div>
+		@DocsSearchBox()
+		<div class="hidden md:block h-6 w-px shrink-0" style="background: var(--border);"></div>
+		@DocsThemePicker()
+		<div class="hidden md:flex items-center gap-2 shrink-0">
+			if user.ID != "" {
+				<a
+					href="/profile"
+					class="icon-btn"
+					title={ "Signed in as " + user.Username }
+					aria-label="Your profile"
+				>
+					@Icon("user", "h-5 w-5")
+				</a>
+			} else {
+				<a href="/login" class="text-sm font-medium hover:underline" style="color: var(--text-secondary);">Sign in</a>
+			}
+			<a href="/" class="btn btn-primary py-1.5 px-3 text-sm no-underline">Open App</a>
+		</div>
+	</header>
+}
+
+// DocsSearchBox hosts the header search input. Results are a server-rendered
+// partial (GET /docs/search/partial) swapped into #docs-search-results by
+// web/src/docs.ts — the server renders what results look like.
+templ DocsSearchBox() {
+	<div
+		class="relative flex-1 max-w-72"
+		x-data="{ open: false }"
+		@click.outside="open = false"
+		@keydown.escape="open = false"
+	>
+		<span class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" style="color: var(--text-secondary);">
+			@Icon("search", "h-4 w-4")
+		</span>
+		<input
+			type="text"
+			class="search-input input pl-9 py-1.5 text-sm"
+			placeholder="Search docs…"
+			id="docs-search"
+			autocomplete="off"
+		/>
+		<div
+			id="docs-search-results"
+			class="hidden absolute top-full right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] max-h-96 overflow-y-auto rounded-2xl border shadow-pop z-40"
+			style="background: var(--bg-secondary); border-color: var(--border);"
+		></div>
+	</div>
+}
+
+// DocsThemePicker reuses the app's theme Alpine component: initializeTheme
+// applies the saved (and, when signed in, server) theme and syncs the select;
+// changeTheme persists the choice. Anchors in the content smooth-scroll via
+// the same init.
+templ DocsThemePicker() {
+	<div x-data="theme" x-init="initializeTheme()" class="shrink-0">
+		<select
+			id="theme-select"
+			@change="changeTheme($event.target.value)"
+			class="input py-1.5 pr-8 text-sm cursor-pointer w-auto"
+			aria-label="Theme"
+		>
+			<optgroup label="Dark">
+				for _, opt := range ThemeOptionsFor(ModeDark) {
+					<option value={ opt.Name }>{ opt.Label }</option>
+				}
+			</optgroup>
+			<optgroup label="Light">
+				for _, opt := range ThemeOptionsFor(ModeLight) {
+					<option value={ opt.Name }>{ opt.Label }</option>
+				}
+			</optgroup>
+		</select>
+	</div>
+}
+
+// DocsSidebar renders the category → subcategory navigation. Sections and
+// groups toggle collapsed/expanded client-side (pure open/closed state);
+// the server decides what is expanded on first paint via data-collapsed.
+templ DocsSidebar(nav Navigation, currentPath string) {
+	<aside
+		id="docs-sidebar"
+		class="sidebar fixed lg:sticky top-14 bottom-0 lg:bottom-auto left-0 z-40 lg:z-10 w-72 shrink-0 lg:h-[calc(100vh-3.5rem)] overflow-y-auto -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out bg-surface-raised border-r border-line"
+	>
+		<nav class="py-2" aria-label="Documentation">
+			for _, section := range nav.Sections {
+				<div class="nav-section border-b border-line last:border-b-0 pb-2">
+					<button
+						type="button"
+						class="nav-section-title w-full flex items-center gap-2.5 px-4 py-2.5 cursor-pointer select-none text-xs uppercase tracking-wider font-semibold transition-colors hover:bg-surface-hover"
+						style="color: var(--text-secondary);"
+						@click="toggleCollapsible($el)"
+					>
+						<span class="shrink-0" style="color: var(--accent);">
+							@Icon(section.Icon, "h-4 w-4")
+						</span>
+						<span class="flex-1 text-left">{ section.Title }</span>
+						<span class="section-arrow shrink-0 transition-transform" style={ chevronStyle(section.Collapsed) }>
+							@Icon("chevron-down", "h-4 w-4")
+						</span>
+					</button>
+					<div class="nav-items pb-1" data-collapsed={ collapsibleState(section.Collapsed) }>
+						for _, item := range section.Items {
+							<a href={ item.URL } class={ docsNavClass(currentPath, item.URL, "pl-7") }>
+								<span>{ item.Title }</span>
+							</a>
+						}
+						for _, group := range section.Groups {
+							<div class="mt-0.5">
+								<button
+									type="button"
+									class="nav-group-title w-full flex items-center gap-1.5 pl-7 pr-4 py-1.5 cursor-pointer select-none text-xs font-semibold uppercase tracking-wide transition-colors hover:bg-surface-hover"
+									style="color: var(--text-secondary);"
+									@click="toggleCollapsible($el)"
+								>
+									<span class="flex-1 text-left truncate">{ group.Title }</span>
+									<span class="section-arrow shrink-0 transition-transform" style={ chevronStyle(group.Collapsed) }>
+										@Icon("chevron-down", "h-3.5 w-3.5")
+									</span>
+								</button>
+								<div class="nav-group-items" data-collapsed={ collapsibleState(group.Collapsed) }>
+									for _, item := range group.Items {
+										<a href={ item.URL } class={ docsNavClass(currentPath, item.URL, "pl-9") }>
+											<span class="truncate">{ item.Title }</span>
+										</a>
+									}
+								</div>
+							</div>
+						}
+					</div>
+				</div>
+			}
+		</nav>
+	</aside>
+}
+
+// DocsSearchResults renders the search results partial swapped into the
+// header dropdown. Server-rendered on purpose (rendering ownership): the
+// client never builds result markup from JSON.
+templ DocsSearchResults(results []SearchResultItem) {
+	if len(results) == 0 {
+		<div class="px-4 py-3 text-sm" style="color: var(--text-secondary);">No matching pages.</div>
+	} else {
+		<ul class="py-1 list-none m-0 p-0">
+			for _, r := range results {
+				<li>
+					<a href={ r.URL } class="block px-4 py-2 no-underline transition-colors hover:bg-surface-hover" onclick="this.closest('#docs-search-results').classList.add('hidden')">
+						<span class="block text-sm font-medium truncate" style="color: var(--text-primary);">{ r.Title }</span>
+						if r.Category != "" {
+							<span class="block text-xs" style="color: var(--text-secondary);">{ r.Category }</span>
+						}
+					</a>
+				</li>
+			}
+		</ul>
+	}
+}
+
+// DocsNotFound renders the standalone docs 404 page: same theme tokens, no
+// app chrome, no CDN dependencies.
+templ DocsNotFound(title string, message string) {
+	<!DOCTYPE html>
+	<html lang="en">
+		<head>
+			@ThemeFlashGuard()
+			<meta charset="UTF-8"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<title>{ title } - Bookhoard Documentation</title>
+			<link href="/static/style.css" rel="stylesheet"/>
+			<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
+		</head>
+		<body class="theme-tokyo-night min-h-screen font-sans antialiased">
+			<div class="min-h-screen flex items-center justify-center p-4">
+				<div class="card p-8 max-w-md w-full text-center">
+					<span class="inline-grid place-items-center mb-4" style="color: var(--accent);">
+						@Icon("book-open", "h-10 w-10")
+					</span>
+					<h1 class="text-2xl font-bold mb-3" style="color: var(--text-primary);">{ title }</h1>
+					<p class="text-sm mb-6" style="color: var(--text-secondary);">{ message }</p>
+					<div class="flex items-center justify-center gap-3">
+						<a href="/docs" class="btn btn-primary py-2 px-4 text-sm no-underline">Documentation</a>
+						<a href="/" class="btn py-2 px-4 text-sm no-underline">Bookhoard</a>
+					</div>
 				</div>
 			</div>
 		</body>
diff --git a/templates/docs_render_test.go b/templates/docs_render_test.go
new file mode 100644
index 00000000..12bbdd27
--- /dev/null
+++ b/templates/docs_render_test.go
@@ -0,0 +1,146 @@
+package templates
+
+import (
+	"context"
+	"strings"
+	"testing"
+)
+
+// The docs layout is a standalone documentation site: it must NOT embed the
+// app chrome (its sidebar assumed a signed-in user) and must never contain a
+// login form — the old layout posted credentials via htmx that was never
+// loaded on this page, degrading to a native GET that put the username and
+// password into the URL. These render tests pin that fix.
+func TestDocsLayoutRendersStandalone(t *testing.T) {
+	nav := Navigation{
+		Sections: []NavSection{
+			{
+				Title: "Getting Started",
+				Icon:  "book-open",
+				Items: []NavItem{{Title: "Overview", URL: "/docs"}},
+			},
+			{
+				Title:     "User Guide",
+				Icon:      "book",
+				Collapsed: true,
+				Items:     []NavItem{{Title: "Dashboard", URL: "/docs/user/dashboard"}},
+				Groups: []NavGroup{
+					{
+						Title:     "Devices",
+						Items:     []NavItem{{Title: "Kobo Setup", URL: "/docs/user/devices/kobo-setup"}},
+						Collapsed: true,
+					},
+				},
+			},
+		},
+	}
+	doc := Document{
+		Title:   "Test Doc",
+		Content: "<p>Hello docs</p>",
+		TOC:     []TOCItem{{Level: 2, Title: "Section", Anchor: "section"}},
+		Breadcrumb: []BreadcrumbItem{
+			{Title: "Docs", URL: "/docs"},
+			{Title: "User Guide"},
+		},
+		SourceFile: "user/test.md",
+	}
+
+	var b strings.Builder
+	if err := DocsLayout(nav, doc, User{Theme: "tokyo-night"}, "/docs/user/test").Render(context.Background(), &b); err != nil {
+		t.Fatalf("DocsLayout: %v", err)
+	}
+	out := b.String()
+
+	for _, banned := range []string{
+		"app-sidebar",               // app chrome
+		`hx-post="/api/auth/login"`, // no inline login form (the URL-leak bug)
+		`name="password"`,           // credentials never render on docs pages
+		"prose-invert",              // theme-aware prose, not hardcoded dark
+		"highlight-dark.min.css",    // highlighting is server-side now
+		"cdn.tailwindcss.com",       // no CDN dependencies
+		"lunr",                      // dead client-side search is gone
+	} {
+		if strings.Contains(out, banned) {
+			t.Errorf("docs layout must not contain %q", banned)
+		}
+	}
+
+	for _, want := range []string{
+		`href="/docs"`,           // sidebar + logo links
+		`data-collapsed="true"`,  // collapsed section state
+		`data-collapsed="false"`, // expanded section state
+		"Open App",               // topbar action
+		"theme-select",           // theme picker
+		"docs-search-results",    // search dropdown target
+		"Hello docs",             // content rendered
+		"page-docs",
+	} {
+		if !strings.Contains(out, want) {
+			t.Errorf("docs layout missing %q", want)
+		}
+	}
+
+	// Anonymous visitor: a sign-in LINK, never a form.
+	b.Reset()
+	if err := DocsLayout(nav, doc, User{Theme: "tokyo-night"}, "/docs/user/test").Render(context.Background(), &b); err != nil {
+		t.Fatalf("DocsLayout anonymous: %v", err)
+	}
+	if !strings.Contains(b.String(), `href="/login"`) {
+		t.Error("anonymous docs layout should link to /login")
+	}
+}
+
+func TestDocsTopbarSignedIn(t *testing.T) {
+	var b strings.Builder
+	if err := DocsTopbar(User{ID: "u1", Username: "reader", Theme: "tokyo-night"}).Render(context.Background(), &b); err != nil {
+		t.Fatalf("DocsTopbar: %v", err)
+	}
+	out := b.String()
+	if strings.Contains(out, `href="/login"`) {
+		t.Error("signed-in topbar must not offer /login")
+	}
+	if !strings.Contains(out, "reader") {
+		t.Error("signed-in topbar should surface the username")
+	}
+}
+
+func TestDocsSearchResultsPartial(t *testing.T) {
+	var b strings.Builder
+	results := []SearchResultItem{
+		{Title: "Kobo Setup", Category: "User Guide", URL: "/docs/user/devices/kobo-setup"},
+	}
+	if err := DocsSearchResults(results).Render(context.Background(), &b); err != nil {
+		t.Fatalf("DocsSearchResults: %v", err)
+	}
+	out := b.String()
+	for _, want := range []string{"Kobo Setup", "User Guide", `/docs/user/devices/kobo-setup`} {
+		if !strings.Contains(out, want) {
+			t.Errorf("search results missing %q", want)
+		}
+	}
+
+	// Empty state renders, not blank markup.
+	b.Reset()
+	if err := DocsSearchResults(nil).Render(context.Background(), &b); err != nil {
+		t.Fatalf("DocsSearchResults empty: %v", err)
+	}
+	if !strings.Contains(b.String(), "No matching pages.") {
+		t.Error("search results empty state missing")
+	}
+}
+
+func TestDocsNotFoundRenders(t *testing.T) {
+	var b strings.Builder
+	if err := DocsNotFound("Document Not Found", "no such page").Render(context.Background(), &b); err != nil {
+		t.Fatalf("DocsNotFound: %v", err)
+	}
+	out := b.String()
+	for _, want := range []string{"Document Not Found", "no such page", `href="/docs"`} {
+		if !strings.Contains(out, want) {
+			t.Errorf("404 page missing %q", want)
+		}
+	}
+	if strings.Contains(out, "cdn.tailwindcss.com") {
+		t.Error("404 page must not pull the tailwind CDN")
+	}
+}
diff --git a/templates/docs_templ.go b/templates/docs_templ.go
index d166186e..cf141ba9 100644
--- a/templates/docs_templ.go
+++ b/templates/docs_templ.go
@@ -10,6 +10,16 @@ import templruntime "github.com/a-h/templ/runtime"
 
 import "fmt"
 
+// DocsLayout renders the standalone documentation site: a docs-owned topbar
+// (search, theme picker, Open App), a docs-only sidebar with category →
+// subcategory navigation, and the markdown content.
+//
+// It deliberately does NOT embed the app Header: docs are a public surface
+// (setup and troubleshooting happen pre-login), and the app chrome assumed a
+// signed-in user — it rendered a sign-in form that silently degraded into a
+// native GET submit (credentials into the URL) because this page never loaded
+// htmx. Signed-out visitors get a plain "Sign in" LINK here; the form lives
+// on /login where it belongs.
 func DocsLayout(nav Navigation, doc Document, user User, currentPath string) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -31,20 +41,28 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\" class=\"dark\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ThemeFlashGuard().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 11, Col: 21}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 22, Col: 21}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Bookhoard Documentation</title><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"icon\" type=\"image/svg+xml\" href=\"/static/favicon.svg\"><link rel=\"stylesheet\" href=\"/static/highlight-dark.min.css\"></head>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " - Bookhoard Documentation</title><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"icon\" type=\"image/svg+xml\" href=\"/static/favicon.svg\"></head>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -53,7 +71,7 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<body x-data=\"docs\" x-init=\"initializeSearch(); highlightCurrentPage(); initializeCodeCopyButtons()\" class=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<body x-data=\"docs\" x-init=\"initializeSearch(); initializeCodeCopyButtons()\" class=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -66,180 +84,28 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = Header(user, currentPath).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = DocsTopbar(user).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<button class=\"lg:hidden icon-btn fixed top-[4.75rem] left-4 z-50 bg-surface-raised\" onclick=\"toggleSidebar()\" aria-label=\"Toggle documentation menu\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<!-- Mobile drawer backdrop --><div id=\"docs-overlay\" class=\"hidden fixed inset-0 z-40 lg:hidden\" style=\"background: var(--surface-overlay);\" onclick=\"document.getElementById('docs-sidebar').classList.add('-translate-x-full'); this.classList.add('hidden')\"></div><div class=\"flex\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = Icon("menu", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = DocsSidebar(nav, currentPath).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</button><div id=\"docs-overlay\" class=\"hidden fixed inset-0 z-40 lg:hidden\" style=\"background: var(--surface-overlay);\" onclick=\"toggleSidebar()\"></div><div id=\"search-results\" class=\"hidden fixed inset-0 z-50 overflow-y-auto p-8\" style=\"background: var(--surface-overlay);\"></div><div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\"><div class=\"flex gap-8 py-8\"><aside id=\"docs-sidebar\" class=\"sidebar fixed lg:sticky top-16 lg:top-20 bottom-0 lg:bottom-auto left-0 lg:left-auto z-40 lg:z-10 w-64 shrink-0 lg:h-[calc(100vh-6rem)] overflow-y-auto -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out bg-surface-raised border-r border-line lg:border-r-0\"><div class=\"p-4 border-b border-line\"><div class=\"relative\"><span class=\"absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none\" style=\"color: var(--text-secondary);\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = Icon("search", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span> <input type=\"text\" class=\"search-input input pl-9\" placeholder=\"Search documentation…\" id=\"docs-search\"></div></div>")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		for _, section := range nav.Sections {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<div class=\"nav-section border-b border-line\"><div class=\"nav-section-title flex items-center justify-between px-4 py-3 cursor-pointer select-none text-xs uppercase tracking-wider font-semibold transition-colors hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" @click=\"toggleSection($el)\"><span>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 50, Col: 30}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</span>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = Icon("chevron-down", "h-4 w-4 section-arrow transition-transform").Render(ctx, templ_7745c5c3_Buffer)
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			if section.Collapsed {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<div class=\"nav-items hidden\" data-collapsed=\"true\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				for _, item := range section.Items {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<a href=\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var6 templ.SafeURL
-					templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 56, Col: 29}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"nav-item flex items-center gap-2 py-2 pl-8 pr-4 text-sm no-underline transition-colors hover:bg-surface-hover\" style=\"color: var(--text-secondary);\"><span class=\"text-xs\" style=\"color: var(--accent);\">")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var7 string
-					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 57, Col: 75}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</span> <span>")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var8 string
-					templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 58, Col: 30}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</span></a>")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</div>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			} else {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<div class=\"nav-items\" data-collapsed=\"false\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				for _, item := range section.Items {
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<a href=\"")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var9 templ.SafeURL
-					templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 65, Col: 29}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\" class=\"nav-item flex items-center gap-2 py-2 pl-8 pr-4 text-sm no-underline transition-colors hover:bg-surface-hover\" style=\"color: var(--text-secondary);\"><span class=\"text-xs\" style=\"color: var(--accent);\">")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var10 string
-					templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(item.Icon)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 66, Col: 75}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</span> <span>")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					var templ_7745c5c3_Var11 string
-					templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
-					if templ_7745c5c3_Err != nil {
-						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 67, Col: 30}
-					}
-					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</span></a>")
-					if templ_7745c5c3_Err != nil {
-						return templ_7745c5c3_Err
-					}
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</div>")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</aside><main class=\"main-content flex-1 min-w-0 max-w-4xl\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<main class=\"flex-1 min-w-0\"><div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-10\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(doc.Breadcrumb) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<nav class=\"breadcrumb flex flex-wrap items-center gap-1.5 text-sm mb-8\" aria-label=\"Breadcrumb\" style=\"color: var(--text-secondary);\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<nav class=\"breadcrumb flex flex-wrap items-center gap-1.5 text-sm mb-6\" aria-label=\"Breadcrumb\" style=\"color: var(--text-secondary);\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -250,61 +116,85 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 						return templ_7745c5c3_Err
 					}
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, " <a href=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, " ")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var12 templ.SafeURL
-				templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinURLErrs(crumb.URL)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 82, Col: 28}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\" class=\"no-underline transition-colors hover:underline\" style=\"color: var(--accent);\">")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				var templ_7745c5c3_Var13 string
-				templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(crumb.Title)
-				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 82, Col: 129}
-				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
-				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</a>")
-				if templ_7745c5c3_Err != nil {
-					return templ_7745c5c3_Err
+				if crumb.URL != "" {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<a href=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var5 templ.SafeURL
+					templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinURLErrs(crumb.URL)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 41, Col: 29}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\" class=\"no-underline transition-colors hover:underline\" style=\"color: var(--accent);\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var6 string
+					templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(crumb.Title)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 41, Col: 130}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</a>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				} else {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<span>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var7 string
+					templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(crumb.Title)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 43, Col: 29}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</span>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</nav>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</nav>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<h1 class=\"text-4xl font-bold mb-8 tracking-tight\" style=\"color: var(--text-primary);\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<h1 class=\"text-3xl sm:text-4xl font-bold mb-8 tracking-tight\" style=\"color: var(--text-primary);\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var14 string
-		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(doc.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 86, Col: 104}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 48, Col: 116}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</h1>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</h1>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		if len(doc.TOC) > 0 {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<details class=\"toc card p-4 mb-8\"><summary class=\"cursor-pointer list-none [&::-webkit-details-marker]:hidden flex items-center gap-2 font-semibold transition-colors hover:bg-surface-hover -m-4 p-4 rounded-2xl\" style=\"color: var(--text-primary);\"><span>On this page</span>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "<details class=\"toc card p-4 mb-8\"><summary class=\"cursor-pointer list-none [&::-webkit-details-marker]:hidden flex items-center gap-2 font-semibold transition-colors hover:bg-surface-hover -m-4 p-4 rounded-2xl\" style=\"color: var(--text-primary);\"><span>On this page</span>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -312,61 +202,61 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</summary><div class=\"mt-3\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</summary><div class=\"mt-3\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			for _, item := range doc.TOC {
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "<a href=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "<a href=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var15 templ.SafeURL
-				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinURLErrs("#" + item.Anchor)
+				var templ_7745c5c3_Var9 templ.SafeURL
+				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinURLErrs("#" + item.Anchor)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 96, Col: 35}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 58, Col: 35}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\" class=\"toc-item block py-1 text-sm no-underline transition-colors hover:text-brand\" style=\"")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "\" class=\"toc-item block py-1 text-sm no-underline transition-colors hover:text-brand\" style=\"")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var16 string
-				templ_7745c5c3_Var16, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("margin-left: " + fmt.Sprintf("%drem", item.Level) + "; color: var(--text-secondary);")
+				var templ_7745c5c3_Var10 string
+				templ_7745c5c3_Var10, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("margin-left: " + fmt.Sprintf("%d", item.Level-2) + "rem; color: var(--text-secondary);")
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 98, Col: 105}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 60, Col: 107}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				var templ_7745c5c3_Var17 string
-				templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+				var templ_7745c5c3_Var11 string
+				templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 100, Col: 23}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 62, Col: 23}
 				}
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "</a>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "</a>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</div></details>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</div></details>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div class=\"prose prose-invert max-w-none\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<div class=\"prose max-w-none\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -374,7 +264,694 @@ func DocsLayout(nav Navigation, doc Document, user User, currentPath string) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "</div></main></div></div></body></html>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "</div></div></main></div><!-- module bundle; ?v=<stamp> busts stale intermediate builds --><script type=\"module\" src=\"/static/main.js?v=7\"></script></body></html>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+// DocsTopbar is the docs site's own slim header. It never contains a login
+// form — anonymous visitors get a link to /login (the only place credentials
+// are posted from).
+func DocsTopbar(user User) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<header class=\"sticky top-0 z-30 h-14 shrink-0 border-b flex items-center gap-2 sm:gap-3 px-4 sm:px-6\" style=\"background: var(--bg-primary); border-color: var(--border);\"><button type=\"button\" class=\"lg:hidden icon-btn shrink-0\" @click=\"toggleSidebar()\" aria-label=\"Toggle documentation menu\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("menu", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</button> <a href=\"/docs\" class=\"flex items-center gap-2 shrink-0 no-underline\"><span class=\"grid place-items-center\" style=\"color: var(--accent);\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("book-open", "h-6 w-6").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</span> <span class=\"hidden sm:inline font-bold text-lg tracking-tight\" style=\"color: var(--text-primary);\">Bookhoard</span> <span class=\"text-xs font-semibold px-2 py-0.5 rounded-full\" style=\"background: var(--accent-muted); color: var(--accent);\">Docs</span></a><div class=\"flex-1\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = DocsSearchBox().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "<div class=\"hidden md:block h-6 w-px shrink-0\" style=\"background: var(--border);\"></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = DocsThemePicker().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<div class=\"hidden md:flex items-center gap-2 shrink-0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if user.ID != "" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<a href=\"/profile\" class=\"icon-btn\" title=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var13 string
+			templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.ResolveAttributeValue("Signed in as " + user.Username)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 109, Col: 44}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var13)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "\" aria-label=\"Your profile\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("user", "h-5 w-5").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "</a> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "<a href=\"/login\" class=\"text-sm font-medium hover:underline\" style=\"color: var(--text-secondary);\">Sign in</a> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "<a href=\"/\" class=\"btn btn-primary py-1.5 px-3 text-sm no-underline\">Open App</a></div></header>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+// DocsSearchBox hosts the header search input. Results are a server-rendered
+// partial (GET /docs/search/partial) swapped into #docs-search-results by
+// web/src/docs.ts — the server renders what results look like.
+func DocsSearchBox() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var14 == nil {
+			templ_7745c5c3_Var14 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "<div class=\"relative flex-1 max-w-72\" x-data=\"{ open: false }\" @click.outside=\"open = false\" @keydown.escape=\"open = false\"><span class=\"absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none\" style=\"color: var(--text-secondary);\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("search", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "</span> <input type=\"text\" class=\"search-input input pl-9 py-1.5 text-sm\" placeholder=\"Search docs…\" id=\"docs-search\" autocomplete=\"off\"><div id=\"docs-search-results\" class=\"hidden absolute top-full right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] max-h-96 overflow-y-auto rounded-2xl border shadow-pop z-40\" style=\"background: var(--bg-secondary); border-color: var(--border);\"></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+// DocsThemePicker reuses the app's theme Alpine component: initializeTheme
+// applies the saved (and, when signed in, server) theme and syncs the select;
+// changeTheme persists the choice. Anchors in the content smooth-scroll via
+// the same init.
+func DocsThemePicker() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var15 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var15 == nil {
+			templ_7745c5c3_Var15 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div x-data=\"theme\" x-init=\"initializeTheme()\" class=\"shrink-0\"><select id=\"theme-select\" @change=\"changeTheme($event.target.value)\" class=\"input py-1.5 pr-8 text-sm cursor-pointer w-auto\" aria-label=\"Theme\"><optgroup label=\"Dark\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, opt := range ThemeOptionsFor(ModeDark) {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "<option value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var16 string
+			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.ResolveAttributeValue(opt.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 164, Col: 29}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var16)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var17 string
+			templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(opt.Label)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 164, Col: 43}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "</option>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "</optgroup> <optgroup label=\"Light\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, opt := range ThemeOptionsFor(ModeLight) {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "<option value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var18 string
+			templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.ResolveAttributeValue(opt.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 169, Col: 29}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var18)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var19 string
+			templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(opt.Label)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 169, Col: 43}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "</option>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, "</optgroup></select></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+// DocsSidebar renders the category → subcategory navigation. Sections and
+// groups toggle collapsed/expanded client-side (pure open/closed state);
+// the server decides what is expanded on first paint via data-collapsed.
+func DocsSidebar(nav Navigation, currentPath string) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var20 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var20 == nil {
+			templ_7745c5c3_Var20 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, "<aside id=\"docs-sidebar\" class=\"sidebar fixed lg:sticky top-14 bottom-0 lg:bottom-auto left-0 z-40 lg:z-10 w-72 shrink-0 lg:h-[calc(100vh-3.5rem)] overflow-y-auto -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out bg-surface-raised border-r border-line\"><nav class=\"py-2\" aria-label=\"Documentation\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, section := range nav.Sections {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "<div class=\"nav-section border-b border-line last:border-b-0 pb-2\"><button type=\"button\" class=\"nav-section-title w-full flex items-center gap-2.5 px-4 py-2.5 cursor-pointer select-none text-xs uppercase tracking-wider font-semibold transition-colors hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" @click=\"toggleCollapsible($el)\"><span class=\"shrink-0\" style=\"color: var(--accent);\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon(section.Icon, "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "</span> <span class=\"flex-1 text-left\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var21 string
+			templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(section.Title)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 196, Col: 52}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, "</span> <span class=\"section-arrow shrink-0 transition-transform\" style=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var22 string
+			templ_7745c5c3_Var22, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(chevronStyle(section.Collapsed))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 197, Col: 103}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = Icon("chevron-down", "h-4 w-4").Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "</span></button><div class=\"nav-items pb-1\" data-collapsed=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var23 string
+			templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.ResolveAttributeValue(collapsibleState(section.Collapsed))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 201, Col: 85}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var23)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, item := range section.Items {
+				var templ_7745c5c3_Var24 = []any{docsNavClass(currentPath, item.URL, "pl-7")}
+				templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var24...)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, "<a href=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var25 templ.SafeURL
+				templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 203, Col: 25}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, "\" class=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var26 string
+				templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.ResolveAttributeValue(templ.CSSClasses(templ_7745c5c3_Var24).String())
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 1, Col: 0}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var26)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, "\"><span>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var27 string
+				templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 204, Col: 26}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "</span></a> ")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			for _, group := range section.Groups {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "<div class=\"mt-0.5\"><button type=\"button\" class=\"nav-group-title w-full flex items-center gap-1.5 pl-7 pr-4 py-1.5 cursor-pointer select-none text-xs font-semibold uppercase tracking-wide transition-colors hover:bg-surface-hover\" style=\"color: var(--text-secondary);\" @click=\"toggleCollapsible($el)\"><span class=\"flex-1 text-left truncate\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var28 string
+				templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(group.Title)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 215, Col: 62}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "</span> <span class=\"section-arrow shrink-0 transition-transform\" style=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var29 string
+				templ_7745c5c3_Var29, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(chevronStyle(group.Collapsed))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 216, Col: 104}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = Icon("chevron-down", "h-3.5 w-3.5").Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 62, "</span></button><div class=\"nav-group-items\" data-collapsed=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var30 string
+				templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.ResolveAttributeValue(collapsibleState(group.Collapsed))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 220, Col: 87}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var30)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				for _, item := range group.Items {
+					var templ_7745c5c3_Var31 = []any{docsNavClass(currentPath, item.URL, "pl-9")}
+					templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var31...)
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "<a href=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var32 templ.SafeURL
+					templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinURLErrs(item.URL)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 222, Col: 28}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 65, "\" class=\"")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var33 string
+					templ_7745c5c3_Var33, templ_7745c5c3_Err = templ.ResolveAttributeValue(templ.CSSClasses(templ_7745c5c3_Var31).String())
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 1, Col: 0}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var33)
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 66, "\"><span class=\"truncate\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var34 string
+					templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 223, Col: 46}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, "</span></a>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 68, "</div></div>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "</div></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 70, "</nav></aside>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+// DocsSearchResults renders the search results partial swapped into the
+// header dropdown. Server-rendered on purpose (rendering ownership): the
+// client never builds result markup from JSON.
+func DocsSearchResults(results []SearchResultItem) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var35 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var35 == nil {
+			templ_7745c5c3_Var35 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		if len(results) == 0 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 71, "<div class=\"px-4 py-3 text-sm\" style=\"color: var(--text-secondary);\">No matching pages.</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 72, "<ul class=\"py-1 list-none m-0 p-0\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, r := range results {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 73, "<li><a href=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var36 templ.SafeURL
+				templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinURLErrs(r.URL)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 246, Col: 20}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "\" class=\"block px-4 py-2 no-underline transition-colors hover:bg-surface-hover\" onclick=\"this.closest('#docs-search-results').classList.add('hidden')\"><span class=\"block text-sm font-medium truncate\" style=\"color: var(--text-primary);\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var37 string
+				templ_7745c5c3_Var37, templ_7745c5c3_Err = templ.JoinStringErrs(r.Title)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 247, Col: 100}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var37))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 75, "</span> ")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				if r.Category != "" {
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 76, "<span class=\"block text-xs\" style=\"color: var(--text-secondary);\">")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					var templ_7745c5c3_Var38 string
+					templ_7745c5c3_Var38, templ_7745c5c3_Err = templ.JoinStringErrs(r.Category)
+					if templ_7745c5c3_Err != nil {
+						return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 249, Col: 85}
+					}
+					_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var38))
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+					templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 77, "</span>")
+					if templ_7745c5c3_Err != nil {
+						return templ_7745c5c3_Err
+					}
+				}
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 78, "</a></li>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 79, "</ul>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		return nil
+	})
+}
+
+// DocsNotFound renders the standalone docs 404 page: same theme tokens, no
+// app chrome, no CDN dependencies.
+func DocsNotFound(title string, message string) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var39 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var39 == nil {
+			templ_7745c5c3_Var39 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 80, "<!doctype html><html lang=\"en\"><head>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = ThemeFlashGuard().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 81, "<meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var40 string
+		templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 267, Col: 17}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 82, " - Bookhoard Documentation</title><link href=\"/static/style.css\" rel=\"stylesheet\"><link rel=\"icon\" type=\"image/svg+xml\" href=\"/static/favicon.svg\"></head><body class=\"theme-tokyo-night min-h-screen font-sans antialiased\"><div class=\"min-h-screen flex items-center justify-center p-4\"><div class=\"card p-8 max-w-md w-full text-center\"><span class=\"inline-grid place-items-center mb-4\" style=\"color: var(--accent);\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = Icon("book-open", "h-10 w-10").Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 83, "</span><h1 class=\"text-2xl font-bold mb-3\" style=\"color: var(--text-primary);\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var41 string
+		templ_7745c5c3_Var41, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 277, Col: 84}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var41))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 84, "</h1><p class=\"text-sm mb-6\" style=\"color: var(--text-secondary);\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var42 string
+		templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.JoinStringErrs(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/docs.templ`, Line: 278, Col: 76}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var42))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 85, "</p><div class=\"flex items-center justify-center gap-3\"><a href=\"/docs\" class=\"btn btn-primary py-2 px-4 text-sm no-underline\">Documentation</a> <a href=\"/\" class=\"btn py-2 px-4 text-sm no-underline\">Bookhoard</a></div></div></div></body></html>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/header.templ b/templates/header.templ
index 41882003..33680d81 100644
--- a/templates/header.templ
+++ b/templates/header.templ
@@ -241,7 +241,7 @@ templ Header(user User, currentPath string) {
 		</header>
 		<!-- module bundle; ?v=<commit-ish stamp> busts stale intermediate
 		     builds across app restarts (browser caches are keyed by URL) -->
-		<script type="module" src="/static/main.js?v=6"></script>
+		<script type="module" src="/static/main.js?v=7"></script>
 	</div>
 }
 
diff --git a/templates/header_templ.go b/templates/header_templ.go
index 9405978c..5fcc0839 100644
--- a/templates/header_templ.go
+++ b/templates/header_templ.go
@@ -751,7 +751,7 @@ func Header(user User, currentPath string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "</span> <input type=\"text\" id=\"header-search\" placeholder=\"Search your library…\" class=\"input pl-10\" autocomplete=\"off\"></div></div></header><!-- module bundle; ?v=<commit-ish stamp> busts stale intermediate\n\t\t     builds across app restarts (browser caches are keyed by URL) --><script type=\"module\" src=\"/static/main.js?v=6\"></script></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "</span> <input type=\"text\" id=\"header-search\" placeholder=\"Search your library…\" class=\"input pl-10\" autocomplete=\"off\"></div></div></header><!-- module bundle; ?v=<commit-ish stamp> busts stale intermediate\n\t\t     builds across app restarts (browser caches are keyed by URL) --><script type=\"module\" src=\"/static/main.js?v=7\"></script></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/templates/types.go b/templates/types.go
index 628c1a4a..d81431b4 100644
--- a/templates/types.go
+++ b/templates/types.go
@@ -209,8 +209,20 @@ type Navigation struct {
 	Sections []NavSection
 }
 
+// NavSection is a top-level documentation category. Items are documents that
+// live directly in the section; Groups are subcategories (subdirectories).
 type NavSection struct {
 	Title     string
+	Icon      string
+	Items     []NavItem
+	Groups    []NavGroup
+	Collapsed bool
+}
+
+// NavGroup is a subcategory inside a NavSection (a subdirectory of docs).
+type NavGroup struct {
+	Title     string
+	Icon      string
 	Items     []NavItem
 	Collapsed bool
 }
@@ -218,7 +230,14 @@ type NavSection struct {
 type NavItem struct {
 	Title string
 	URL   string
-	Icon  string
+}
+
+// SearchResultItem is one entry in the docs search results partial. The
+// server renders it (templ); the client only swaps the markup in.
+type SearchResultItem struct {
+	Title    string
+	Category string
+	URL      string
 }
 
 type Document struct {
diff --git a/templates/utils.go b/templates/utils.go
index ce5aeeff..44ae49a3 100644
--- a/templates/utils.go
+++ b/templates/utils.go
@@ -6,9 +6,9 @@ import (
 	"bookhoard/internal/utils"
 	"encoding/json"
 	"fmt"
-	"strconv"
 	"net/url"
 	"sort"
+	"strconv"
 	"strings"
 	"time"
 
@@ -33,6 +33,35 @@ func navItemClass(current, target string) string {
 	return base + "text-content-muted hover:text-content hover:bg-surface-hover"
 }
 
+// docsNavClass returns classes for docs sidebar links (server-rendered active
+// state — there is no client-side highlighter). indent sets the left padding,
+// deeper for subcategory group items.
+func docsNavClass(current, target, indent string) string {
+	base := "nav-item flex items-center " + indent + " pr-4 mr-2 py-1.5 rounded-lg text-sm transition-colors "
+	if strings.TrimRight(current, "/") == strings.TrimRight(target, "/") {
+		return base + "bg-brand/15 text-brand font-medium"
+	}
+	return base + "text-content-muted hover:text-content hover:bg-surface-hover"
+}
+
+// collapsibleState renders the data-collapsed attribute value for a docs nav
+// items container; web/src/docs.ts toggles it on click.
+func collapsibleState(collapsed bool) string {
+	if collapsed {
+		return "true"
+	}
+	return "false"
+}
+
+// chevronStyle pre-rotates a docs nav section/group chevron when collapsed
+// (quote-free value: templ double-escapes quotes in style attributes).
+func chevronStyle(collapsed bool) string {
+	if collapsed {
+		return "transform: rotate(-90deg);"
+	}
+	return "transform: rotate(0deg);"
+}
+
 // themeCheckClass returns the class suffix for a theme option's checkmark
 // wrapper: empty for the active theme (visible), " hidden" otherwise. The
 // check element is always rendered so updateThemeIndicators() can move it
diff --git a/web/src/docs.ts b/web/src/docs.ts
index 844aa9a2..fa2a17d5 100644
--- a/web/src/docs.ts
+++ b/web/src/docs.ts
@@ -1,42 +1,42 @@
 import { Alpine } from "./alpine";
 
+// Documentation site behavior. Rendering ownership (AGENTS.md): the server
+// renders what things look like — nav markup, search results — and this
+// module only orchestrates client-local state (open/closed panels, the
+// search dropdown) and swaps in the server-rendered search partial.
+
 function toggleSidebar(): void {
   const sidebar = document.getElementById("docs-sidebar");
   const overlay = document.getElementById("docs-overlay");
+  if (!sidebar || !overlay) return;
 
-  if (sidebar && overlay) {
-    sidebar.classList.toggle("translate-x-0");
-    sidebar.classList.toggle("-translate-x-full");
-    overlay.classList.toggle("hidden");
-  }
+  sidebar.classList.toggle("translate-x-0");
+  sidebar.classList.toggle("-translate-x-full");
+  overlay.classList.toggle("hidden");
 }
 
-function toggleSection(el: HTMLElement): void {
-  const items = el.nextElementSibling as HTMLElement;
-  const arrow = el.querySelector(".section-arrow") as HTMLElement;
-  if (!items || !arrow) return;
+function toggleCollapsible(header: HTMLElement): void {
+  const items = header.nextElementSibling as HTMLElement | null;
+  const arrow = header.querySelector<HTMLElement>(".section-arrow");
+  if (!items) return;
 
   const isCollapsed = items.getAttribute("data-collapsed") === "true";
 
-  if (isCollapsed) {
-    items.classList.remove("hidden");
-    items.setAttribute("data-collapsed", "false");
-    arrow.style.transform = "rotate(0deg)";
-  } else {
-    items.classList.add("hidden");
-    items.setAttribute("data-collapsed", "true");
-    arrow.style.transform = "rotate(-90deg)";
+  items.classList.toggle("hidden", !isCollapsed);
+  items.setAttribute("data-collapsed", isCollapsed ? "false" : "true");
+  if (arrow) {
+    arrow.style.transform = isCollapsed ? "rotate(0deg)" : "rotate(-90deg)";
   }
 }
 
+let docsSearchTimeout: ReturnType<typeof setTimeout> | null = null;
+let docsSearchAbort: AbortController | null = null;
+
 function initializeDocsSearch(): void {
-  const searchInput = document.getElementById("docs-search") as HTMLInputElement;
+  const searchInput = document.getElementById("docs-search") as HTMLInputElement | null;
   const searchResults = document.getElementById("docs-search-results");
-
   if (!searchInput || !searchResults) return;
 
-  let docsSearchTimeout: ReturnType<typeof setTimeout> | null = null;
-
   searchInput.addEventListener("input", () => {
     const query = searchInput.value.trim();
 
@@ -45,118 +45,77 @@ function initializeDocsSearch(): void {
     }
 
     if (query.length < 2) {
-      searchResults.innerHTML = "";
-      searchResults.classList.add("hidden");
+      hideDocsSearchResults();
       return;
     }
 
     docsSearchTimeout = setTimeout(() => {
-      performDocsSearch(query);
-    }, 300);
+      void performDocsSearch(query);
+    }, 250);
   });
 }
 
-function performDocsSearch(query: string): void {
+function hideDocsSearchResults(): void {
+  const searchResults = document.getElementById("docs-search-results");
+  if (!searchResults) return;
+  searchResults.replaceChildren();
+  searchResults.classList.add("hidden");
+}
+
+// performDocsSearch fetches the server-rendered results partial and swaps it
+// in verbatim. The partial is templ-rendered (DocsSearchResults); this module
+// never builds result markup itself.
+async function performDocsSearch(query: string): Promise<void> {
   const searchResults = document.getElementById("docs-search-results");
   if (!searchResults) return;
 
-  if (!(window as any).lunr) {
-    console.warn("Lunr.js not loaded");
-    return;
-  }
+  docsSearchAbort?.abort();
+  docsSearchAbort = new AbortController();
 
   try {
-    const idx = (window as any).lunrIndex;
-    if (!idx) {
-      searchResults.innerHTML =
-        '<p class="p-2 text-sm" style="color: var(--text-secondary)">Search index not loaded</p>';
-      searchResults.classList.remove("hidden");
-      return;
+    const response = await fetch(`/docs/search/partial?q=${encodeURIComponent(query)}`, {
+      signal: docsSearchAbort.signal,
+    });
+    if (!response.ok) {
+      throw new Error(`search failed: ${response.status}`);
     }
-
-    const results = idx.search(query);
-
-    if (results.length === 0) {
-      searchResults.innerHTML =
-        '<p class="p-2 text-sm" style="color: var(--text-secondary)">No results found</p>';
-    } else {
-      searchResults.innerHTML = results
-        .slice(0, 10)
-        .map((result: { ref: string }) => {
-          const doc = (window as any).docsData?.[result.ref];
-          if (!doc) return "";
-
-          return `
-                    <a href="${result.ref}" class="block p-2 hover:bg-opacity-50 transition-colors" style="background-color: var(--bg-secondary)">
-                        <p class="font-medium text-sm" style="color: var(--text-primary)">${doc.title || result.ref}</p>
-                        ${doc.section ? `<p class="text-xs" style="color: var(--text-secondary)">${doc.section}</p>` : ""}
-                    </a>
-                `;
-        })
-        .join("");
-    }
-
+    searchResults.innerHTML = await response.text();
     searchResults.classList.remove("hidden");
   } catch (error) {
-    console.error("Search error:", error);
-    searchResults.innerHTML =
-      '<p class="p-2 text-sm" style="color: var(--text-secondary)">Search error</p>';
+    if (error instanceof DOMException && error.name === "AbortError") return;
+    console.error("Docs search error:", error);
+    searchResults.textContent = "Search failed — try again.";
+    searchResults.classList.add("px-4", "py-3", "text-sm");
+    searchResults.style.color = "var(--text-secondary)";
     searchResults.classList.remove("hidden");
   }
 }
 
-function highlightCurrentPage(): void {
-  const currentPath = window.location.pathname;
-  document.querySelectorAll(".nav-item").forEach((item) => {
-    if (item.getAttribute("href") === currentPath) {
-      item.classList.add("text-accent", "bg-accent/10", "border-r-2", "border-accent");
-    }
-  });
-}
-
 function initializeCodeCopyButtons(): void {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const hljs = (window as any).hljs;
-  if (hljs) {
-    hljs.highlightAll();
+  document.querySelectorAll(".prose pre").forEach((pre) => {
+    const wrapper = document.createElement("div");
+    wrapper.className = "relative group";
+    pre.parentNode?.insertBefore(wrapper, pre);
+    wrapper.appendChild(pre);
 
-    document.querySelectorAll("pre code").forEach((block) => {
-      const pre = block.parentElement;
-      if (!pre) return;
-
-      const wrapper = document.createElement("div");
-      wrapper.className = "relative group";
-      pre.parentNode.insertBefore(wrapper, pre);
-      wrapper.appendChild(pre);
-
-      const button = document.createElement("button");
-      button.className =
-        "absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
-      button.textContent = "Copy";
-      button.onclick = async () => {
-        await navigator.clipboard.writeText(block.textContent || "");
-        button.textContent = "Copied!";
-        setTimeout(() => {
-          button.textContent = "Copy";
-        }, 2000);
-      };
-      wrapper.appendChild(button);
+    const button = document.createElement("button");
+    button.className =
+      "absolute top-2 right-2 btn px-2 py-1 rounded-lg text-xs opacity-0 group-hover:opacity-100 transition-opacity";
+    button.textContent = "Copy";
+    button.addEventListener("click", async () => {
+      await navigator.clipboard.writeText(pre.textContent || "");
+      button.textContent = "Copied!";
+      setTimeout(() => {
+        button.textContent = "Copy";
+      }, 2000);
     });
-  }
+    wrapper.appendChild(button);
+  });
 }
 
 Alpine.data("docs", () => ({
   toggleSidebar,
-  toggleSection,
+  toggleCollapsible,
   initializeSearch: initializeDocsSearch,
-  highlightCurrentPage,
   initializeCodeCopyButtons,
 }));
-
-export {
-  toggleSidebar,
-  toggleSection,
-  initializeDocsSearch,
-  highlightCurrentPage,
-  initializeCodeCopyButtons,
-};
diff --git a/web/src/rendering-allowlist.txt b/web/src/rendering-allowlist.txt
index 6ddda901..3aac0430 100644
--- a/web/src/rendering-allowlist.txt
+++ b/web/src/rendering-allowlist.txt
@@ -12,7 +12,7 @@ web/src/collection-rules.ts:6
 web/src/collections.ts:5
 web/src/custom-section-builder.ts:10
 web/src/device-management.ts:4
-web/src/docs.ts:5
+web/src/docs.ts:1
 web/src/dashboard.ts:2
 web/src/linking.ts:3
 web/src/markdown.ts:1
diff --git a/web/static/style.css b/web/static/style.css
index 6ea68307..5f86c26f 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -1,2 +1,2 @@
 *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
-/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}select:where([multiple]),select:where([size]:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}input:where([type=checkbox]),input:where([type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}input:where([type=checkbox]):checked,input:where([type=radio]):checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=checkbox]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=radio]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):checked:focus,input:where([type=checkbox]):checked:hover,input:where([type=radio]):checked:focus,input:where([type=radio]):checked:hover{border-color:transparent;background-color:currentColor}input:where([type=checkbox]):indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media (forced-colors:active) {input:where([type=checkbox]):indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):indeterminate:focus,input:where([type=checkbox]):indeterminate:hover{border-color:transparent;background-color:currentColor}input:where([type=file]){background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}input:where([type=file]):focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}:root{color-scheme:dark;--bg-primary:#1a1b26;--bg-secondary:#16161e;--text-primary:#c0caf5;--text-secondary:#9aa5ce;--accent:#7aa2f7;--border:#2a2e42;--status-success:#9ece6a;--status-warning:#e0af68;--status-danger:#f7768e;--status-info:#7aa2f7}.theme-tokyo-night{--bg-primary:#1a1b26;--bg-secondary:#16161e;--text-primary:#c0caf5;--text-secondary:#9aa5ce;--accent:#7aa2f7;--border:#2a2e42}.theme-dracula{--bg-primary:#282a36;--bg-secondary:#21222c;--text-primary:#f8f8f2;--text-secondary:#bfbfbf;--accent:#bd93f9;--border:#3a3d4d}.theme-nord{--bg-primary:#2e3440;--bg-secondary:#3b4252;--text-primary:#eceff4;--text-secondary:#b7c0d2;--accent:#88c0d0;--border:#46577a}.theme-solarized-dark{--bg-primary:#002b36;--bg-secondary:#073642;--text-primary:#c5d3d3;--text-secondary:#93a1a1;--accent:#2aa198;--border:#1d4b58}.theme-monokai{--bg-primary:#272822;--bg-secondary:#1e1f1c;--text-primary:#f8f8f2;--text-secondary:#c8c8b8;--accent:#a6e22e;--border:#3e3d32}.theme-one-dark-pro{--bg-primary:#282c34;--bg-secondary:#21252b;--text-primary:#d7dbe0;--text-secondary:#9da5b4;--accent:#61dafb;--border:#3a3f4b}.theme-material-dark{--bg-primary:#263238;--bg-secondary:#1e282d;--text-primary:#eff;--text-secondary:#b0bec5;--accent:#80cbc4;--border:#37474f}.theme-vantablack{--bg-primary:#000;--bg-secondary:#1a1a1a;--text-primary:#fff;--text-secondary:#ececec;--accent:#8d8d8d;--border:#1a1a1a}.theme-last-horizon{--bg-primary:#0c0b0c;--bg-secondary:#171516;--text-primary:#fafcfb;--text-secondary:#cfd3cd;--accent:#b59790;--border:#2b2729}.theme-ethereal{--bg-primary:#060b1e;--bg-secondary:#131a3a;--text-primary:#ffcead;--text-secondary:#c9b8a6;--accent:#7d82d9;--border:#252e56}.theme-hackerman{--bg-primary:#0b0c16;--bg-secondary:#151828;--text-primary:#ddf7ff;--text-secondary:#b5c5db;--accent:#82fb9c;--border:#1f253a}.theme-matte-black{--bg-primary:#121212;--bg-secondary:#1e1e1e;--text-primary:#bebebe;--text-secondary:#8a8a8d;--accent:#e68e0d;--border:#2a2a2a}.theme-solitude{--bg-primary:#101315;--bg-secondary:#171b1e;--text-primary:#cacccc;--text-secondary:#8a9199;--accent:#798186;--border:#262d31}.theme-retro-82{--bg-primary:#05182e;--bg-secondary:#0a2540;--text-primary:#f6dcac;--text-secondary:#a7c9c6;--accent:#faa968;--border:#134e5a}.theme-osaka-jade{--bg-primary:#111c18;--bg-secondary:#23372b;--text-primary:#c1c497;--text-secondary:#81b8a8;--accent:#509475;--border:#32473b}.theme-kanagawa{--bg-primary:#1f1f28;--bg-secondary:#223249;--text-primary:#dcd7ba;--text-secondary:#c8c093;--accent:#7e9cd8;--border:#363646}.theme-miasma{--bg-primary:#222;--bg-secondary:#2c2c2c;--text-primary:#c2c2b0;--text-secondary:#8a8a7e;--accent:#78824b;--border:#383838}.theme-lumon{--bg-primary:#16242d;--bg-secondary:#1b2d40;--text-primary:#d6e2ee;--text-secondary:#4d86b0;--accent:#8bc9eb;--border:#243d56}.theme-ristretto{--bg-primary:#2c2525;--bg-secondary:#3d2f2a;--text-primary:#e6d9db;--text-secondary:#c3b7b8;--accent:#f38d70;--border:#403e41}.theme-gruvbox{--bg-primary:#282828;--bg-secondary:#3c3836;--text-primary:#d4be98;--text-secondary:#bdae93;--accent:#7daea3;--border:#504945}.theme-everforest{--bg-primary:#2d353b;--bg-secondary:#343f44;--text-primary:#d3c6aa;--text-secondary:#9da9a0;--accent:#7fbbb3;--border:#3d484d}.theme-catppuccin-mocha{--bg-primary:#1e1e2e;--bg-secondary:#181825;--text-primary:#cdd6f4;--text-secondary:#a6adc8;--accent:#f38ba8;--border:#313244}.theme-catppuccin-macchiato{--bg-primary:#24273a;--bg-secondary:#1e2030;--text-primary:#cad3f5;--text-secondary:#a5adcb;--accent:#c6a0f6;--border:#363a4f}.theme-catppuccin-frappe{--bg-primary:#303446;--bg-secondary:#292c3c;--text-primary:#c6d0f5;--text-secondary:#a5adce;--accent:#ca9ee6;--border:#414559}.theme-catppuccin-latte{color-scheme:light;--bg-primary:#eff1f5;--bg-secondary:#fff;--text-primary:#4c4f69;--text-secondary:#6c6f85;--accent:#d20f39;--border:#dcdfe6}.theme-tokyo-night-day{color-scheme:light;--bg-primary:#e1e2e7;--bg-secondary:#fff;--text-primary:#3760bf;--text-secondary:#6172b0;--accent:#2e7de9;--border:#c4c8da}.theme-solarized-light{color-scheme:light;--bg-primary:#fdf6e3;--bg-secondary:#eee8d5;--text-primary:#586e75;--text-secondary:#93a1a1;--accent:#268bd2;--border:#ddd6c1}.theme-one-light{color-scheme:light;--bg-primary:#fafafa;--bg-secondary:#fff;--text-primary:#383a42;--text-secondary:#696c77;--accent:#4078f2;--border:#dfdfdf}.theme-ayu-light{color-scheme:light;--bg-primary:#fafafa;--bg-secondary:#f3f4f5;--text-primary:#5c6166;--text-secondary:#8a9199;--accent:#f93;--border:#e2e3e5}.theme-github-light{color-scheme:light;--bg-primary:#fff;--bg-secondary:#f6f8fa;--text-primary:#24292f;--text-secondary:#57606a;--accent:#0969da;--border:#d0d7de}.theme-gruvbox-light{color-scheme:light;--bg-primary:#fbf1c7;--bg-secondary:#f2e5bc;--text-primary:#3c3836;--text-secondary:#7c6f64;--accent:#076678;--border:#d5c4a1}.theme-everforest-light{color-scheme:light;--bg-primary:#fdf6e3;--bg-secondary:#f4f0d9;--text-primary:#5c6a72;--text-secondary:#708089;--accent:#3a94c5;--border:#d5cfaf}.theme-kanagawa-lotus{color-scheme:light;--bg-primary:#f2ecbc;--bg-secondary:#e5ddb0;--text-primary:#545464;--text-secondary:#716e61;--accent:#4d699b;--border:#d5cea3}.theme-rose-pine{color-scheme:light;--bg-primary:#faf4ed;--bg-secondary:#fffaf3;--text-primary:#575279;--text-secondary:#797593;--accent:#56949f;--border:#dfdad9}.theme-lupine{color-scheme:light;--bg-primary:#fafafa;--bg-secondary:#fff;--text-primary:#212121;--text-secondary:#757575;--accent:#3264eb;--border:#d0d0d0}.theme-flexoki-light{color-scheme:light;--bg-primary:#fffcf0;--bg-secondary:#f2efe4;--text-primary:#100f0f;--text-secondary:#6f6e69;--accent:#205ea6;--border:#cecdc3}.theme-white{color-scheme:light;--bg-primary:#fff;--bg-secondary:#f5f5f5;--text-primary:#000;--text-secondary:grey;--accent:#6e6e6e;--border:#e8e8e8}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--surface-hover:color-mix(in srgb,var(--text-primary) 9%,transparent);--surface-overlay:rgba(0,0,0,.55);--border-strong:color-mix(in srgb,var(--text-primary) 24%,var(--border));--accent-muted:color-mix(in srgb,var(--accent) 14%,var(--bg-secondary));--shadow-card:0 1px 2px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08);--shadow-card-hover:0 6px 16px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.12);--shadow-pop:0 12px 40px rgba(0,0,0,.34),0 4px 12px rgba(0,0,0,.2);--shadow-bar:0 1px 0 rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.16)}.theme-ayu-light,.theme-catppuccin-latte,.theme-everforest-light,.theme-flexoki-light,.theme-github-light,.theme-gruvbox-light,.theme-kanagawa-lotus,.theme-lupine,.theme-one-light,.theme-rose-pine,.theme-solarized-light,.theme-tokyo-night-day,.theme-white{--shadow-card:0 1px 2px rgba(76,79,105,.08),0 1px 3px rgba(76,79,105,.06);--shadow-card-hover:0 6px 16px rgba(76,79,105,.16),0 2px 6px rgba(76,79,105,.08);--shadow-pop:0 12px 40px rgba(76,79,105,.22),0 4px 12px rgba(76,79,105,.12);--shadow-bar:0 1px 0 rgba(76,79,105,.08),0 4px 16px rgba(76,79,105,.1)}select option{background-color:var(--bg-secondary);color:var(--text-primary)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[x-cloak]{display:none!important}:root{--sidebar-w:16rem;--topbar-h:4rem}.app-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:60;background-color:var(--bg-secondary);border-right:1px solid color-mix(in srgb,var(--text-primary) 7%,transparent);display:flex;flex-direction:column;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease}.app-sidebar.is-open{transform:translateX(0)}.app-sidebar-backdrop{position:fixed;inset:0;z-index:55;background:var(--surface-overlay);opacity:0;pointer-events:none;transition:opacity .25s ease}.app-sidebar-backdrop.is-open{opacity:1;pointer-events:auto}.sidebar-panel{background-color:color-mix(in srgb,var(--text-primary) 4%,var(--bg-secondary));border:1px solid var(--border);border-radius:.75rem;padding:.375rem}.mode-toggle-active{background-color:var(--accent-muted);color:var(--text-primary)}@media (min-width:1024px){.app-sidebar{transform:none}.app-mobile-only,.app-sidebar-backdrop{display:none!important}}.app-topbar{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--topbar-h);background-color:color-mix(in srgb,var(--bg-secondary) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}body:has(.app-sidebar){padding-top:var(--topbar-h)}@media (min-width:1024px){body:has(.app-sidebar){padding-left:var(--sidebar-w)}.app-topbar{left:var(--sidebar-w)}}.app-subbar{position:sticky;top:var(--topbar-h);z-index:30}*{scrollbar-color:color-mix(in srgb,var(--text-primary) 22%,transparent) transparent}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:970px){.\!container{max-width:970px!important}.container{max-width:970px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:rgba(17,24,39,.1);--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:hsla(0,0%,100%,.1);--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose-invert{--tw-prose-body:var(--tw-prose-invert-body);--tw-prose-headings:var(--tw-prose-invert-headings);--tw-prose-lead:var(--tw-prose-invert-lead);--tw-prose-links:var(--tw-prose-invert-links);--tw-prose-bold:var(--tw-prose-invert-bold);--tw-prose-counters:var(--tw-prose-invert-counters);--tw-prose-bullets:var(--tw-prose-invert-bullets);--tw-prose-hr:var(--tw-prose-invert-hr);--tw-prose-quotes:var(--tw-prose-invert-quotes);--tw-prose-quote-borders:var(--tw-prose-invert-quote-borders);--tw-prose-captions:var(--tw-prose-invert-captions);--tw-prose-kbd:var(--tw-prose-invert-kbd);--tw-prose-kbd-shadows:var(--tw-prose-invert-kbd-shadows);--tw-prose-code:var(--tw-prose-invert-code);--tw-prose-pre-code:var(--tw-prose-invert-pre-code);--tw-prose-pre-bg:var(--bg-secondary);--tw-prose-th-borders:var(--tw-prose-invert-th-borders);--tw-prose-td-borders:var(--tw-prose-invert-td-borders)}.prose-invert :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:var(--bg-primary);color:var(--text-primary);font-weight:400}.prose-invert :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:""}.prose-invert :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:""}.prose-invert :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;color:inherit}.prose-invert :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:var(--bg-secondary);color:var(--text-primary)}.\!card{background-color:var(--bg-secondary)!important;border:1px solid color-mix(in srgb,var(--text-primary) 6%,transparent)!important;border-radius:1rem!important;box-shadow:var(--shadow-card)!important}.card{background-color:var(--bg-secondary);border:1px solid color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:1rem;box-shadow:var(--shadow-card)}.\!btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.5rem!important;padding:.5rem 1rem!important;border-radius:.625rem!important;font-size:.875rem!important;font-weight:500!important;line-height:1.25rem!important;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,border-color .15s ease!important;cursor:pointer!important;white-space:nowrap!important}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border-radius:.625rem;font-size:.875rem;font-weight:500;line-height:1.25rem;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,border-color .15s ease;cursor:pointer;white-space:nowrap}.\!btn:active{transform:translateY(1px)!important}.btn:active{transform:translateY(1px)}.\!btn:disabled{opacity:.5!important;cursor:not-allowed!important}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--accent);color:var(--bg-primary);box-shadow:var(--shadow-card)}.btn-primary:hover{background-color:color-mix(in srgb,var(--accent) 88%,#fff);box-shadow:var(--shadow-card-hover)}.btn-secondary{background-color:transparent;color:var(--text-primary);border:1px solid var(--border-strong)}.btn-secondary:hover{background-color:var(--surface-hover);border-color:var(--accent);color:var(--text-primary)}.btn-ghost{background-color:transparent;color:var(--text-secondary)}.btn-ghost:hover{background-color:var(--surface-hover);color:var(--text-primary)}.btn-danger{background-color:var(--status-danger);color:#fff}.btn-danger:hover{background-color:color-mix(in srgb,var(--status-danger) 88%,#fff)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.625rem;color:var(--text-secondary);transition:background-color .15s ease,color .15s ease;cursor:pointer}.icon-btn:hover{background-color:var(--surface-hover);color:var(--text-primary)}.\!input{width:100%!important;background-color:var(--bg-primary)!important;color:var(--text-primary)!important;border:1px solid var(--border)!important;border-radius:.625rem!important;padding:.5rem .75rem!important;font-size:.875rem!important;transition:border-color .15s ease,box-shadow .15s ease!important}.input{width:100%;background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border);border-radius:.625rem;padding:.5rem .75rem;font-size:.875rem;transition:border-color .15s ease,box-shadow .15s ease}.\!input::-moz-placeholder{color:color-mix(in srgb,var(--text-secondary) 75%,transparent)!important}.\!input::placeholder{color:color-mix(in srgb,var(--text-secondary) 75%,transparent)!important}.input::-moz-placeholder{color:color-mix(in srgb,var(--text-secondary) 75%,transparent)}.input::placeholder{color:color-mix(in srgb,var(--text-secondary) 75%,transparent)}.\!input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)!important;outline:none!important}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);outline:none}.chip{gap:.375rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;background-color:var(--accent-muted);color:var(--text-primary)}.badge,.chip{display:inline-flex;align-items:center}.badge{padding:.125rem .5rem;border-radius:.375rem;font-size:.6875rem;font-weight:600;letter-spacing:.01em}.book-card{position:relative;background-color:var(--bg-secondary);border:1px solid color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:.75rem;overflow:hidden;box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.book-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}.book-card-cover{position:relative}.book-card-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%);opacity:0;transition:opacity .18s ease;pointer-events:none}.book-card:hover .book-card-cover:after{opacity:1}.book-card-action{position:absolute;top:0;left:0;right:0;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:2;transition:opacity .18s ease}.book-card:focus-within .book-card-action,.book-card:hover .book-card-action{opacity:1}.book-card-action-btn{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:9999px;background-color:color-mix(in srgb,var(--accent) 92%,#fff);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.4);pointer-events:auto;text-decoration:none}.book-card-meta{background-color:var(--bg-secondary);padding:.5rem .625rem}@media (hover:none){.book-card-action{opacity:1}}.brand-gradient{background-image:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,var(--bg-secondary)),var(--bg-secondary) 62%)}.hero-backdrop{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50%;filter:blur(28px) saturate(1.4);transform:scale(1.15);opacity:.5}.hero-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-primary) 35%,transparent),var(--bg-primary) 92%)}.stat-card{background-color:var(--bg-secondary);border:1px solid color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:1rem;padding:1.25rem;box-shadow:var(--shadow-card)}.loading-spinner{display:inline-block;width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.status-pending{background-color:color-mix(in srgb,var(--status-warning) 20%,transparent);color:var(--status-warning)}.status-processing{background-color:color-mix(in srgb,var(--status-info) 20%,transparent);color:var(--status-info)}.status-completed{background-color:color-mix(in srgb,var(--status-success) 20%,transparent);color:var(--status-success)}.status-failed{background-color:color-mix(in srgb,var(--status-danger) 20%,transparent);color:var(--status-danger)}.prose pre code.hljs{background-color:transparent!important}.prose code.hljs{background-color:var(--bg-primary)!important;padding:.2em .4em}.prose pre{background-color:var(--bg-secondary)!important}.prose .hljs{background-color:transparent!important;color:var(--text-primary)!important}.bg-theme-active,.bg-wood-active{background-color:var(--bg-primary)!important;box-shadow:inset 0 0 0 2px var(--accent)}.bg-theme-inactive,.bg-wood-inactive{background-color:var(--bg-secondary)!important}.bg-wood-dark,.bg-wood-light,.bg-wood-mahogany{background-attachment:fixed;background-position:50%;background-size:cover}.bg-wood-dark{background-image:url(/static/textures/wood-dark.png)}.bg-wood-light{background-image:url(/static/textures/wood-light.png)}.bg-wood-mahogany{background-image:url(/static/textures/wood-mahogany.png)}#collections-container.bg-wood-dark,#collections-container.bg-wood-light,#collections-container.bg-wood-mahogany,body.bg-wood-dark,body.bg-wood-light,body.bg-wood-mahogany{background-attachment:fixed;background-position:50%;background-size:cover}#collections-container[data-wood=wood-light]{--wood-text-primary:#1a1a1a;--wood-text-secondary:#4a4a4a;--wood-border:#8b5a2b}#collections-container[data-wood=wood-dark]{--wood-text-primary:#f5f5f5;--wood-text-secondary:silver;--wood-border:#7a5228}#collections-container[data-wood=wood-mahogany]{--wood-text-primary:#f5f5f5;--wood-text-secondary:silver;--wood-border:#8b3a3a}#collections-container[data-wood] a,#collections-container[data-wood] button,#collections-container[data-wood] h1,#collections-container[data-wood] h2,#collections-container[data-wood] h3,#collections-container[data-wood] p,#collections-container[data-wood] span{color:var(--wood-text-primary)!important}#collections-container[data-wood] .text-secondary{color:var(--wood-text-secondary)!important}#collections-container[data-wood=wood-light] a{color:#06c!important}#collections-container[data-wood=wood-dark] a,#collections-container[data-wood=wood-mahogany] a{color:#6cf!important}#collections-container[data-wood=wood-light] .carousel-nav-left{background:linear-gradient(90deg,rgba(0,0,0,.6),transparent)}#collections-container[data-wood=wood-light] .carousel-nav-right{background:linear-gradient(270deg,rgba(0,0,0,.6),transparent)}#collections-container[data-wood=wood-dark] .carousel-nav-left,#collections-container[data-wood=wood-mahogany] .carousel-nav-left{background:linear-gradient(90deg,rgba(0,0,0,.3),transparent)}#collections-container[data-wood=wood-dark] .carousel-nav-right,#collections-container[data-wood=wood-mahogany] .carousel-nav-right{background:linear-gradient(270deg,rgba(0,0,0,.3),transparent)}#collections-container[data-wood] .book-card{border:1px solid var(--wood-border)}.reader-icon{display:block;fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.reader-glass{background-color:color-mix(in srgb,var(--bg-primary) 70%,transparent);backdrop-filter:blur(18px) saturate(1.4);border-color:color-mix(in srgb,var(--border) 60%,transparent)}#reader-topbar.reader-glass{border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);box-shadow:0 4px 18px rgba(0,0,0,.16)}#reader-bottombar.reader-glass{border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);box-shadow:0 -4px 18px rgba(0,0,0,.16)}#reader-bottombar,#reader-topbar{transition:transform .3s ease,opacity .3s ease}#reader-chrome.chrome-hidden #reader-topbar{transform:translateY(-101%)}#reader-chrome.chrome-hidden #reader-bottombar{transform:translateY(101%)}#reader-bottombar button:hover,#reader-topbar a:hover,#reader-topbar button:hover{background-color:color-mix(in srgb,currentColor 13%,transparent)}#reader-bottombar button:focus-visible,#reader-topbar a:focus-visible,#reader-topbar button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.reader-sep{background-color:color-mix(in srgb,var(--border) 80%,transparent)}.reader-select{background-color:color-mix(in srgb,var(--bg-primary) 55%,transparent);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);color:inherit}.reader-select:hover{border-color:#3b82f6}#reader-bottombar input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:18px;background:transparent;cursor:pointer;accent-color:#3b82f6}#reader-bottombar input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:9999px;background:color-mix(in srgb,currentColor 22%,transparent)}#reader-bottombar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-5px;width:14px;height:14px;border:none;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);-webkit-transition:transform .12s ease;transition:transform .12s ease}#reader-bottombar input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}#reader-bottombar input[type=range]::-moz-range-track{height:4px;border-radius:9999px;background:color-mix(in srgb,currentColor 22%,transparent)}#reader-bottombar input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45)}.drawer-scrim{position:fixed;inset:0;background-color:rgba(0,0,0,.45);z-index:45}.reader-drawer{position:fixed;top:0;bottom:0;width:340px;max-width:calc(100vw - 2rem);background-color:var(--bg-secondary);z-index:50;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.reader-drawer.left{left:0;border-right:1px solid var(--border)}.reader-drawer.right{right:0;border-left:1px solid var(--border)}@media (max-width:640px){.reader-drawer{width:100%;max-width:100%}}.reader-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}.reader-drawer-body{flex:1;overflow-y:auto;padding:1rem}.reader-seg{display:inline-flex;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);background-color:color-mix(in srgb,var(--bg-primary) 50%,transparent);border-radius:.5rem;overflow:hidden}.reader-seg button{padding:.25rem .6rem;font-size:.75rem;line-height:1.25rem}.reader-seg button.active{background-color:#2563eb;color:#fff}.reader-seg button.\!active{background-color:#2563eb!important;color:#fff!important}.theme-swatch{height:2.25rem;border-radius:.5rem;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}.theme-swatch:hover{border-color:#3b82f6}.reader-popover{position:fixed;transform:translate(-50%,calc(-100% - 10px));background-color:color-mix(in srgb,var(--bg-primary) 85%,transparent);backdrop-filter:blur(16px) saturate(1.3);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:.75rem;box-shadow:0 8px 28px rgba(0,0,0,.35);padding:.5rem .625rem;z-index:60}.color-dot{width:1.375rem;height:1.375rem;border-radius:9999px;border:2px solid rgba(0,0,0,.25);transition:transform .12s ease}.color-dot:hover{transform:scale(1.15)}.color-dot.selected{border-color:#fff;box-shadow:0 0 0 2px #3b82f6}.reader-popover-btn{padding:.3rem;border-radius:.375rem;color:inherit}.reader-popover-btn:hover{background-color:color-mix(in srgb,currentColor 13%,transparent)}.reader-popover-btn.danger:hover{background-color:rgba(153,27,27,.6)}.adjust-handle{position:fixed;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#3b82f6;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);pointer-events:auto;cursor:grab;touch-action:none}.adjust-handle[data-which=end]{border-radius:50% 50% 0 50%;transform:rotate(45deg)}.adjust-handle[data-dragging]{cursor:grabbing;scale:1.15}.reader-note-input{width:100%;resize:vertical;padding:.5rem;border-radius:.5rem;font-size:.875rem;color:inherit;background-color:color-mix(in srgb,var(--bg-primary) 55%,transparent);border:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.reader-note-input:focus{outline:2px solid #3b82f6;outline-offset:1px}.note-rich p{margin:0}.note-rich p+p{margin-top:.6em}.note-rich h1,.note-rich h2,.note-rich h3,.note-rich h4,.note-rich h5,.note-rich h6{margin:.8em 0 .4em;font-weight:600;line-height:1.3}.note-rich h1{font-size:1.25em}.note-rich h2{font-size:1.15em}.note-rich h3,.note-rich h4{font-size:1.05em}.note-rich h5,.note-rich h6{font-size:1em}.note-rich blockquote{margin:.6em 0;padding:.1em 0 .1em .75em;border-left:3px solid color-mix(in srgb,var(--text-secondary) 55%,transparent);color:var(--text-secondary)}.note-rich ol,.note-rich ul{margin:.6em 0;padding-left:1.4em}.note-rich ul{list-style:disc}.note-rich ol{list-style:decimal}.note-rich li{margin:.15em 0}.note-rich li+li{margin-top:.25em}.note-rich li>p{margin:0}.note-rich pre{margin:.6em 0;padding:.6em .75em;overflow-x:auto;border-radius:.375rem;background-color:color-mix(in srgb,var(--bg-secondary) 80%,transparent);border:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.note-rich pre code{background:none;padding:0;font-size:.9em}.note-rich code{font-size:.9em;padding:.1em .3em;border-radius:.25rem;background-color:color-mix(in srgb,var(--bg-secondary) 80%,transparent)}.note-rich a{text-decoration:underline;text-underline-offset:2px}.note-rich hr{margin:.8em 0}.note-rich table{margin:.6em 0;border-collapse:collapse;font-size:.95em}.note-rich td,.note-rich th{border:1px solid var(--border);padding:.25em .5em;text-align:left}.note-rich th{font-weight:600}.reader-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}.reader-tabs button{flex:1;padding:.5rem .25rem;font-size:.8125rem;color:var(--text-secondary);border-bottom:2px solid transparent}.reader-tabs button.active{color:var(--text-primary);border-bottom-color:#3b82f6}.reader-tabs button.\!active{color:var(--text-primary)!important;border-bottom-color:#3b82f6!important}.reader-tab-count{display:inline-block;min-width:1.25rem;margin-left:.25rem;padding:0 .25rem;border-radius:9999px;font-size:.6875rem;line-height:1.1rem;background-color:color-mix(in srgb,currentColor 13%,transparent)}.reader-hl-row{display:flex;align-items:center;gap:.25rem}.reader-tools-popover{position:absolute;bottom:100%;right:.5rem;margin-bottom:.5rem;min-width:16rem;max-width:calc(100vw - 1.5rem);max-height:min(26rem,65vh);overflow-y:auto;background-color:color-mix(in srgb,var(--bg-primary) 88%,transparent);backdrop-filter:blur(18px) saturate(1.3);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:.75rem;box-shadow:0 -6px 28px rgba(0,0,0,.35);padding:.25rem}.reader-tools-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .75rem;font-size:.875rem;border-radius:.5rem}.reader-tools-row+.reader-tools-row{border-top:1px solid color-mix(in srgb,var(--border) 45%,transparent)}.reader-tools-row:hover{background-color:color-mix(in srgb,currentColor 6%,transparent)}#reader-view::part(filter){filter:var(--fx-filter,none)}.reader-thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.reader-thumb{position:relative;border-radius:.375rem;overflow:hidden;border:2px solid transparent;padding:0;background-color:color-mix(in srgb,currentColor 6%,transparent)}.reader-thumb:hover{border-color:color-mix(in srgb,currentColor 30%,transparent)}.reader-thumb.active{border-color:#3b82f6}.reader-thumb.\!active{border-color:#3b82f6!important}.reader-thumb-img{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden}.reader-thumb-img canvas,.reader-thumb-img img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.reader-thumb-num{position:absolute;bottom:.2rem;right:.35rem;font-size:.65rem;line-height:1;padding:.15rem .3rem;border-radius:.25rem;background-color:rgba(0,0,0,.55);color:#fff}.reader-edge-zone{position:absolute;top:0;bottom:0;width:8%;max-width:72px;min-width:44px;z-index:10;display:none;align-items:center;cursor:pointer}.reader-edge-zone.left{left:0;justify-content:flex-start;padding-left:.75rem}.reader-edge-zone.right{right:0;justify-content:flex-end;padding-right:.75rem}.reader-edge-zone:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .15s ease}.reader-edge-zone.left:before{background:linear-gradient(90deg,hsla(0,0%,100%,.08),transparent)}.reader-edge-zone.right:before{background:linear-gradient(270deg,hsla(0,0%,100%,.08),transparent)}.reader-edge-zone .reader-icon{color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));opacity:0;transition:opacity .15s ease}.reader-edge-zone:hover:before{opacity:1}.reader-edge-zone:hover .reader-icon{opacity:.85}@media (hover:hover) and (pointer:fine){.reader-edge-zone{display:flex}}.reader-help-backdrop{position:fixed;inset:0;background-color:rgba(0,0,0,.5);z-index:70}.reader-help{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(34rem,calc(100vw - 2rem));max-height:min(38rem,calc(100vh - 4rem));display:flex;flex-direction:column;background-color:color-mix(in srgb,var(--bg-primary) 90%,transparent);backdrop-filter:blur(20px) saturate(1.3);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:.875rem;box-shadow:0 16px 48px rgba(0,0,0,.45);z-index:71}.reader-help-header{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0}.reader-help-body{overflow-y:auto;padding:1rem 1.25rem}.reader-help-section{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin:1.1rem 0 .4rem}.reader-help-body .reader-help-section:first-child{margin-top:0}.help-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.3rem 0;font-size:.85rem}.help-row>span:first-child{color:var(--text-primary)}.help-keys{text-align:right;font-size:.8rem;white-space:nowrap}.help-keys,.help-note{color:var(--text-secondary)}.help-note{font-size:.75rem}.kbd{display:inline-block;min-width:1.4rem;text-align:center;padding:.05rem .4rem;margin:0 .1rem;border-radius:.3rem;border:solid color-mix(in srgb,var(--border) 80%,transparent);border-width:1px 1px 2px;background-color:color-mix(in srgb,currentColor 8%,transparent);font-family:ui-monospace,monospace;font-size:.72rem;line-height:1.2rem}.reader-search-bar{display:flex;align-items:center;gap:.375rem;padding:.625rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}.reader-search-status{padding:.375rem 1rem;font-size:.75rem;color:var(--text-secondary);border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent);flex-shrink:0;min-height:1.75rem}.search-result{display:block;padding:.375rem .5rem;border-radius:.375rem;font-size:.8125rem;line-height:1.35}.search-result:hover{background-color:color-mix(in srgb,currentColor 9%,transparent)}.search-result mark{background-color:rgba(255,213,79,.4);color:inherit;border-radius:2px;padding:0 1px}.stacked-covers{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden}.stacked-covers .cover-img{position:absolute;width:70%;height:90%;-o-object-fit:cover;object-fit:cover;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.4)}.stacked-covers.cover-count-1 .cover-0{top:5%;left:15%}.stacked-covers.cover-count-2 .cover-0{top:8%;left:5%;transform:rotate(-6deg);z-index:1}.stacked-covers.cover-count-2 .cover-1{top:2%;left:25%;transform:rotate(3deg);z-index:2}.stacked-covers.cover-count-3 .cover-0{top:12%;left:2%;transform:rotate(-8deg);z-index:1}.stacked-covers.cover-count-3 .cover-1{top:6%;left:15%;transform:rotate(-2deg);z-index:2}.stacked-covers.cover-count-3 .cover-2{top:0;left:30%;transform:rotate(4deg);z-index:3}.stacked-covers.cover-count-4 .cover-0{top:14%;left:0;width:65%;height:85%;transform:rotate(-10deg);z-index:1}.stacked-covers.cover-count-4 .cover-1{top:10%;left:12%;width:65%;height:85%;transform:rotate(-4deg);z-index:2}.stacked-covers.cover-count-4 .cover-2{top:5%;left:22%;width:65%;height:85%;transform:rotate(2deg);z-index:3}.stacked-covers.cover-count-4 .cover-3{top:0;left:32%;width:65%;height:85%;transform:rotate(6deg);z-index:4}.stacked-covers.cover-count-5 .cover-0,.stacked-covers.cover-count-6 .cover-0,.stacked-covers.cover-count-7 .cover-0{top:16%;left:-2%;width:62%;height:82%;transform:rotate(-12deg);z-index:1}.stacked-covers.cover-count-5 .cover-1,.stacked-covers.cover-count-6 .cover-1,.stacked-covers.cover-count-7 .cover-1{top:12%;left:8%;width:62%;height:82%;transform:rotate(-6deg);z-index:2}.stacked-covers.cover-count-5 .cover-2,.stacked-covers.cover-count-6 .cover-2,.stacked-covers.cover-count-7 .cover-2{top:8%;left:17%;width:62%;height:82%;transform:rotate(-1deg);z-index:3}.stacked-covers.cover-count-5 .cover-3,.stacked-covers.cover-count-6 .cover-3,.stacked-covers.cover-count-7 .cover-3{top:4%;left:26%;width:62%;height:82%;transform:rotate(4deg);z-index:4}.stacked-covers.cover-count-5 .cover-4,.stacked-covers.cover-count-6 .cover-4,.stacked-covers.cover-count-7 .cover-4{top:0;left:35%;width:62%;height:82%;transform:rotate(9deg);z-index:5}.stacked-covers.cover-count-6 .cover-5,.stacked-covers.cover-count-7 .cover-5{top:-2%;left:30%;width:60%;height:80%;transform:rotate(13deg);z-index:6}.stacked-covers.cover-count-7 .cover-6{top:-4%;left:25%;width:58%;height:78%;transform:rotate(16deg);z-index:7}.series-card{transition:transform .2s ease,box-shadow .2s ease}.series-card:hover{transform:translateY(-4px)}@keyframes skeleton-shimmer{to{transform:translateX(100%)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.bottom-0{bottom:0}.bottom-1{bottom:.25rem}.bottom-full{bottom:100%}.end-1{inset-inline-end:.25rem}.left-0{left:0}.left-0\.5{left:.125rem}.left-1\/2{left:50%}.left-3{left:.75rem}.left-4{left:1rem}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-4{right:1rem}.right-5{right:1.25rem}.top-0{top:0}.top-0\.5{top:.125rem}.top-1{top:.25rem}.top-1\/2{top:50%}.top-16{top:4rem}.top-2{top:.5rem}.top-4{top:1rem}.top-5{top:1.25rem}.top-6{top:1.5rem}.top-\[4\.75rem\]{top:4.75rem}.top-full{top:100%}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[60\]{z-index:60}.z-\[65\]{z-index:65}.z-\[70\]{z-index:70}.z-\[9999\]{z-index:9999}.col-span-full{grid-column:1/-1}.-m-2{margin:-.5rem}.-m-4{margin:-1rem}.m-1{margin:.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1\.5{margin-top:.375rem;margin-bottom:.375rem}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.\!grid{display:grid!important}.grid{display:grid}.inline-grid{display:inline-grid}.contents{display:contents}.hidden{display:none}.aspect-\[2\/3\]{aspect-ratio:2/3}.aspect-\[3\/4\]{aspect-ratio:3/4}.h-0\.5{height:.125rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-72{height:18rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-96{height:24rem}.h-full{height:100%}.h-screen{height:100vh}.max-h-32{max-height:8rem}.max-h-48{max-height:12rem}.max-h-60{max-height:15rem}.max-h-64{max-height:16rem}.max-h-72{max-height:18rem}.max-h-96{max-height:24rem}.max-h-\[20rem\]{max-height:20rem}.max-h-\[70vh\]{max-height:70vh}.max-h-\[90vh\]{max-height:90vh}.min-h-0{min-height:0}.min-h-\[150px\]{min-height:150px}.min-h-\[60px\]{min-height:60px}.min-h-screen{min-height:100vh}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-36{width:9rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[150px\]{min-width:150px}.min-w-\[190px\]{min-width:190px}.min-w-\[200px\]{min-width:200px}.min-w-\[3\.5rem\]{min-width:3.5rem}.min-w-\[300px\]{min-width:300px}.min-w-\[3rem\]{min-width:3rem}.min-w-\[4rem\]{min-width:4rem}.min-w-\[7\.5rem\]{min-width:7.5rem}.min-w-\[7rem\]{min-width:7rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-\[500px\]{max-width:500px}.max-w-\[5rem\]{max-width:5rem}.max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x:-100%}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.-translate-y-2\.5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-2\.5{--tw-translate-y:-0.625rem}.-translate-y-4{--tw-translate-y:-1rem}.-translate-y-4,.-translate-y-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-5{--tw-translate-y:-1.25rem}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-7{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-7{--tw-translate-x:1.75rem}.translate-x-full{--tw-translate-x:100%}.translate-x-full,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.translate-y-2{--tw-translate-y:0.5rem}.rotate-180,.translate-y-2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-95{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.resize-y{resize:vertical}.resize{resize:both}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-start{scroll-snap-align:start}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-1{row-gap:.25rem}.gap-y-4{row-gap:1rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.self-stretch{align-self:stretch}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overscroll-none{overscroll-behavior:none}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.875rem}.rounded-b-2xl{border-bottom-right-radius:1.25rem;border-bottom-left-radius:1.25rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-r{border-right-width:1px}.border-r-2{border-right-width:2px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[var\(--border\)\]{border-color:var(--border)}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-current{border-color:currentColor}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-line{border-color:var(--border)}.border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.border-t-transparent{border-top-color:transparent}.bg-\[var\(--accent\)\]{background-color:var(--accent)}.bg-\[var\(--bg-secondary\)\]{background-color:var(--bg-secondary)}.bg-\[var\(--border\)\]{background-color:var(--border)}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-500\/90{background-color:rgba(59,130,246,.9)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-500\/90{background-color:rgba(34,197,94,.9)}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\/90{background-color:rgba(239,68,68,.9)}.bg-surface-hover{background-color:var(--surface-hover)}.bg-surface-raised{background-color:var(--bg-secondary)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8/var(--tw-bg-opacity,1))}.bg-yellow-500\/90{background-color:rgba(234,179,8,.9)}.bg-opacity-40{--tw-bg-opacity:0.4}.bg-opacity-80{--tw-bg-opacity:0.8}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-wood-dark{background-image:url(/static/textures/wood-dark.png)}.bg-wood-light{background-image:url(/static/textures/wood-light.png)}.bg-wood-mahogany{background-image:url(/static/textures/wood-mahogany.png)}.from-gray-700{--tw-gradient-from:#374151 var(--tw-gradient-from-position);--tw-gradient-to:rgba(55,65,81,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-900{--tw-gradient-from:#111827 var(--tw-gradient-from-position);--tw-gradient-to:rgba(17,24,39,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-gray-900{--tw-gradient-to:#111827 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pb-\[env\(safe-area-inset-bottom\)\]{padding-bottom:env(safe-area-inset-bottom)}.pl-1{padding-left:.25rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pl-8{padding-left:2rem}.pl-9{padding-left:2.25rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.pr-7{padding-right:1.75rem}.pr-8{padding-right:2rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-\[env\(safe-area-inset-top\)\]{padding-top:env(safe-area-inset-top)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-\[var\(--bg-primary\)\]{color:var(--bg-primary)}.text-\[var\(--text-secondary\)\]{color:var(--text-secondary)}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-content-muted{color:var(--text-secondary)}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-current{accent-color:currentColor}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black\/10{--tw-ring-color:rgba(0,0,0,.1)}.ring-blue-500{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.blur{--tw-blur:blur(8px)}.blur,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.invert{--tw-invert:invert(100%)}.invert,.sepia{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia:sepia(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@view-transition{navigation:auto}#selection-handles{position:fixed;inset:0;pointer-events:none;z-index:55}#selection-handles .sel-handle{position:absolute;top:0;left:0;width:12px;height:24px;pointer-events:auto;touch-action:none;background:#8ab4f8;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.45);opacity:.95}#selection-handles .sel-handle:before{content:"";position:absolute;top:-4px;left:50%;width:2px;height:5px;background:inherit;transform:translateX(-50%)}.fb-connective{font-size:.65rem;font-weight:700;letter-spacing:.05em;color:var(--text-secondary);min-width:1.6rem}.fb-picker{font-size:.8rem;padding:.3rem .6rem;border-radius:.5rem;border:1px solid var(--border);background-color:var(--bg-primary);color:var(--text-primary);cursor:pointer;white-space:nowrap}.fb-picker:hover{background-color:var(--surface-hover)}.fb-picker-active{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.fb-picker-op{color:var(--text-secondary)}.fb-negated-text{color:var(--status-danger)}.fb-value{width:9rem;font-size:.8rem;padding:.3rem .5rem}.fb-menu{position:absolute;z-index:60;margin-top:.25rem;width:15rem;max-height:16rem;overflow-y:auto;border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.25);background-color:var(--bg-primary);border:1px solid var(--border)}.fb-menu-value{width:16rem;left:0;top:100%;margin-top:.25rem}.fb-menu-group{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--text-secondary);padding:.4rem .75rem .3rem;margin-top:.3rem;background-color:color-mix(in srgb,var(--text-primary) 5%,transparent);border-top:1px solid var(--border)}.fb-menu-filter-wrap,.fb-menu-group{border-bottom:1px solid var(--border)}.fb-menu-filter-wrap{padding:.4rem .5rem;background-color:var(--bg-primary)}.fb-menu-filter{width:100%;font-size:.8rem;padding:.3rem .5rem;border-radius:.4rem;border:1px solid var(--border);background-color:var(--bg-primary);color:var(--text-primary);outline:none}.fb-menu-filter:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.fb-menu-empty{font-size:.78rem;color:var(--text-secondary);padding:.6rem .75rem}.fb-menu-item{display:flex;width:100%;justify-content:space-between;align-items:center;gap:.5rem;text-align:left;font-size:.8rem;padding:.35rem .75rem .35rem 1.7rem;color:var(--text-primary);cursor:pointer}.fb-menu-item:hover{background-color:var(--surface-hover)}.fb-menu-item-active{color:var(--accent)}.fb-mode-btn{font-size:.65rem;font-weight:700;letter-spacing:.05em;padding:.15rem .5rem;border-radius:9999px;border:1px solid var(--border);background-color:var(--bg-primary);color:var(--text-secondary);cursor:pointer}.fb-mode-btn.fb-mode-active{background-color:var(--accent-muted);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent)}.fb-mini-btn{font-size:.7rem;padding:.15rem .5rem;border-radius:.4rem;border:1px dashed var(--border);background-color:transparent;color:var(--text-secondary);cursor:pointer;white-space:nowrap}.fb-mini-btn:hover{background-color:var(--surface-hover);color:var(--text-primary)}.fb-mini-btn.fb-danger{border-style:solid;color:var(--status-danger)}.fb-group-end{height:.5rem;margin-top:-.25rem}.fb-group-end,.fb-nested{border-left:2px solid var(--border)}.fb-nested{padding-left:.6rem}.fb-connective-btn{font-size:.65rem;font-weight:700;letter-spacing:.05em;color:var(--text-secondary);min-width:1.9rem;padding:.1rem .3rem;border:1px dashed var(--border);border-radius:.4rem;background-color:transparent;cursor:pointer;text-align:center}.fb-connective-btn:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.fb-chip-static{border-style:solid;opacity:.7;cursor:default}.fb-menu-fields{display:flex;flex-direction:column;max-height:18rem;overflow:hidden}.fb-menu-fields .fb-menu-filter-wrap{flex-shrink:0;border-bottom:1px solid var(--border)}.fb-menu-fields .fb-menu-scroll{overflow-y:auto;min-height:0}.fb-value-cell .fb-menu-empty{padding:.5rem .75rem;font-size:.78rem;color:var(--text-secondary)}@media (min-width:768px){.md\:container{width:100%}@media (min-width:640px){.md\:container{max-width:640px}}@media (min-width:768px){.md\:container{max-width:768px}}@media (min-width:970px){.md\:container{max-width:970px}}@media (min-width:1024px){.md\:container{max-width:1024px}}@media (min-width:1280px){.md\:container{max-width:1280px}}@media (min-width:1536px){.md\:container{max-width:1536px}}}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:h-5:after{content:var(--tw-content);height:1.25rem}.after\:w-5:after{content:var(--tw-content);width:1.25rem}.after\:rounded-full:after{content:var(--tw-content);border-radius:9999px}.after\:bg-white:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.first\:mt-0:first-child{margin-top:0}.hover\:border-opacity-50:hover{--tw-border-opacity:0.5}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.hover\:bg-red-900\/60:hover{background-color:rgba(127,29,29,.6)}.hover\:bg-surface-hover:hover{background-color:var(--surface-hover)}.hover\:bg-white\/30:hover{background-color:hsla(0,0%,100%,.3)}.hover\:bg-opacity-50:hover{--tw-bg-opacity:0.5}.hover\:bg-opacity-80:hover{--tw-bg-opacity:0.8}.hover\:text-brand:hover{color:var(--accent)}.hover\:text-content:hover{color:var(--text-primary)}.hover\:text-green-700:hover{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.hover\:text-red-700:hover{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:ring-2:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.hover\:ring-blue-400:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.hover\:ring-green-400:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(74 222 128/var(--tw-ring-opacity,1))}.hover\:ring-purple-400:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(192 132 252/var(--tw-ring-opacity,1))}.hover\:ring-red-400:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(248 113 113/var(--tw-ring-opacity,1))}.hover\:ring-yellow-400:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(250 204 21/var(--tw-ring-opacity,1))}.hover\:ring-offset-2:hover{--tw-ring-offset-width:2px}.hover\:ring-offset-transparent:hover{--tw-ring-offset-color:transparent}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.group[open] .group-open\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:pointer-events-auto{pointer-events:auto}.group:hover .group-hover\:opacity-100{opacity:1}.peer:checked~.peer-checked\:translate-x-5{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked~.peer-checked\:border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.peer:checked~.peer-checked\:bg-brand{background-color:var(--accent)}.peer:checked~.peer-checked\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:checked~.peer-checked\:ring-blue-400{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.peer:checked~.peer-checked\:after\:translate-x-full:after{content:var(--tw-content);--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:ml-auto{margin-left:auto}.sm\:block{display:block}.sm\:inline{display:inline}.sm\:w-20{width:5rem}.sm\:w-40{width:10rem}.sm\:w-96{width:24rem}.sm\:max-w-none{max-width:none}.sm\:flex-none{flex:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-1{gap:.25rem}.sm\:truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sm\:p-2{padding:.5rem}.sm\:p-5{padding:1.25rem}.sm\:px-2{padding-left:.5rem;padding-right:.5rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-2{padding-top:.5rem;padding-bottom:.5rem}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:py-28{padding-top:7rem;padding-bottom:7rem}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:mx-0{margin-left:0;margin-right:0}.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-80{height:20rem}.md\:w-56{width:14rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-5{gap:1.25rem}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:bottom-auto{bottom:auto}.lg\:left-auto{left:auto}.lg\:top-20{top:5rem}.lg\:z-10{z-index:10}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:hidden{display:none}.lg\:h-\[calc\(100vh-6rem\)\]{height:calc(100vh - 6rem)}.lg\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:border-r-0{border-right-width:0}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-36{padding-top:9rem;padding-bottom:9rem}}@media (min-width:1280px){.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}
\ No newline at end of file
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}select:where([multiple]),select:where([size]:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}input:where([type=checkbox]),input:where([type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}input:where([type=checkbox]):checked,input:where([type=radio]):checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=checkbox]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=radio]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):checked:focus,input:where([type=checkbox]):checked:hover,input:where([type=radio]):checked:focus,input:where([type=radio]):checked:hover{border-color:transparent;background-color:currentColor}input:where([type=checkbox]):indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media (forced-colors:active) {input:where([type=checkbox]):indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):indeterminate:focus,input:where([type=checkbox]):indeterminate:hover{border-color:transparent;background-color:currentColor}input:where([type=file]){background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}input:where([type=file]):focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}:root{color-scheme:dark;--bg-primary:#1a1b26;--bg-secondary:#16161e;--text-primary:#c0caf5;--text-secondary:#9aa5ce;--accent:#7aa2f7;--border:#2a2e42;--status-success:#9ece6a;--status-warning:#e0af68;--status-danger:#f7768e;--status-info:#7aa2f7}.theme-tokyo-night{--bg-primary:#1a1b26;--bg-secondary:#16161e;--text-primary:#c0caf5;--text-secondary:#9aa5ce;--accent:#7aa2f7;--border:#2a2e42}.theme-dracula{--bg-primary:#282a36;--bg-secondary:#21222c;--text-primary:#f8f8f2;--text-secondary:#bfbfbf;--accent:#bd93f9;--border:#3a3d4d}.theme-nord{--bg-primary:#2e3440;--bg-secondary:#3b4252;--text-primary:#eceff4;--text-secondary:#b7c0d2;--accent:#88c0d0;--border:#46577a}.theme-solarized-dark{--bg-primary:#002b36;--bg-secondary:#073642;--text-primary:#c5d3d3;--text-secondary:#93a1a1;--accent:#2aa198;--border:#1d4b58}.theme-monokai{--bg-primary:#272822;--bg-secondary:#1e1f1c;--text-primary:#f8f8f2;--text-secondary:#c8c8b8;--accent:#a6e22e;--border:#3e3d32}.theme-one-dark-pro{--bg-primary:#282c34;--bg-secondary:#21252b;--text-primary:#d7dbe0;--text-secondary:#9da5b4;--accent:#61dafb;--border:#3a3f4b}.theme-material-dark{--bg-primary:#263238;--bg-secondary:#1e282d;--text-primary:#eff;--text-secondary:#b0bec5;--accent:#80cbc4;--border:#37474f}.theme-vantablack{--bg-primary:#000;--bg-secondary:#1a1a1a;--text-primary:#fff;--text-secondary:#ececec;--accent:#8d8d8d;--border:#1a1a1a}.theme-last-horizon{--bg-primary:#0c0b0c;--bg-secondary:#171516;--text-primary:#fafcfb;--text-secondary:#cfd3cd;--accent:#b59790;--border:#2b2729}.theme-ethereal{--bg-primary:#060b1e;--bg-secondary:#131a3a;--text-primary:#ffcead;--text-secondary:#c9b8a6;--accent:#7d82d9;--border:#252e56}.theme-hackerman{--bg-primary:#0b0c16;--bg-secondary:#151828;--text-primary:#ddf7ff;--text-secondary:#b5c5db;--accent:#82fb9c;--border:#1f253a}.theme-matte-black{--bg-primary:#121212;--bg-secondary:#1e1e1e;--text-primary:#bebebe;--text-secondary:#8a8a8d;--accent:#e68e0d;--border:#2a2a2a}.theme-solitude{--bg-primary:#101315;--bg-secondary:#171b1e;--text-primary:#cacccc;--text-secondary:#8a9199;--accent:#798186;--border:#262d31}.theme-retro-82{--bg-primary:#05182e;--bg-secondary:#0a2540;--text-primary:#f6dcac;--text-secondary:#a7c9c6;--accent:#faa968;--border:#134e5a}.theme-osaka-jade{--bg-primary:#111c18;--bg-secondary:#23372b;--text-primary:#c1c497;--text-secondary:#81b8a8;--accent:#509475;--border:#32473b}.theme-kanagawa{--bg-primary:#1f1f28;--bg-secondary:#223249;--text-primary:#dcd7ba;--text-secondary:#c8c093;--accent:#7e9cd8;--border:#363646}.theme-miasma{--bg-primary:#222;--bg-secondary:#2c2c2c;--text-primary:#c2c2b0;--text-secondary:#8a8a7e;--accent:#78824b;--border:#383838}.theme-lumon{--bg-primary:#16242d;--bg-secondary:#1b2d40;--text-primary:#d6e2ee;--text-secondary:#4d86b0;--accent:#8bc9eb;--border:#243d56}.theme-ristretto{--bg-primary:#2c2525;--bg-secondary:#3d2f2a;--text-primary:#e6d9db;--text-secondary:#c3b7b8;--accent:#f38d70;--border:#403e41}.theme-gruvbox{--bg-primary:#282828;--bg-secondary:#3c3836;--text-primary:#d4be98;--text-secondary:#bdae93;--accent:#7daea3;--border:#504945}.theme-everforest{--bg-primary:#2d353b;--bg-secondary:#343f44;--text-primary:#d3c6aa;--text-secondary:#9da9a0;--accent:#7fbbb3;--border:#3d484d}.theme-catppuccin-mocha{--bg-primary:#1e1e2e;--bg-secondary:#181825;--text-primary:#cdd6f4;--text-secondary:#a6adc8;--accent:#f38ba8;--border:#313244}.theme-catppuccin-macchiato{--bg-primary:#24273a;--bg-secondary:#1e2030;--text-primary:#cad3f5;--text-secondary:#a5adcb;--accent:#c6a0f6;--border:#363a4f}.theme-catppuccin-frappe{--bg-primary:#303446;--bg-secondary:#292c3c;--text-primary:#c6d0f5;--text-secondary:#a5adce;--accent:#ca9ee6;--border:#414559}.theme-catppuccin-latte{color-scheme:light;--bg-primary:#eff1f5;--bg-secondary:#fff;--text-primary:#4c4f69;--text-secondary:#6c6f85;--accent:#d20f39;--border:#dcdfe6}.theme-tokyo-night-day{color-scheme:light;--bg-primary:#e1e2e7;--bg-secondary:#fff;--text-primary:#3760bf;--text-secondary:#6172b0;--accent:#2e7de9;--border:#c4c8da}.theme-solarized-light{color-scheme:light;--bg-primary:#fdf6e3;--bg-secondary:#eee8d5;--text-primary:#586e75;--text-secondary:#93a1a1;--accent:#268bd2;--border:#ddd6c1}.theme-one-light{color-scheme:light;--bg-primary:#fafafa;--bg-secondary:#fff;--text-primary:#383a42;--text-secondary:#696c77;--accent:#4078f2;--border:#dfdfdf}.theme-ayu-light{color-scheme:light;--bg-primary:#fafafa;--bg-secondary:#f3f4f5;--text-primary:#5c6166;--text-secondary:#8a9199;--accent:#f93;--border:#e2e3e5}.theme-github-light{color-scheme:light;--bg-primary:#fff;--bg-secondary:#f6f8fa;--text-primary:#24292f;--text-secondary:#57606a;--accent:#0969da;--border:#d0d7de}.theme-gruvbox-light{color-scheme:light;--bg-primary:#fbf1c7;--bg-secondary:#f2e5bc;--text-primary:#3c3836;--text-secondary:#7c6f64;--accent:#076678;--border:#d5c4a1}.theme-everforest-light{color-scheme:light;--bg-primary:#fdf6e3;--bg-secondary:#f4f0d9;--text-primary:#5c6a72;--text-secondary:#708089;--accent:#3a94c5;--border:#d5cfaf}.theme-kanagawa-lotus{color-scheme:light;--bg-primary:#f2ecbc;--bg-secondary:#e5ddb0;--text-primary:#545464;--text-secondary:#716e61;--accent:#4d699b;--border:#d5cea3}.theme-rose-pine{color-scheme:light;--bg-primary:#faf4ed;--bg-secondary:#fffaf3;--text-primary:#575279;--text-secondary:#797593;--accent:#56949f;--border:#dfdad9}.theme-lupine{color-scheme:light;--bg-primary:#fafafa;--bg-secondary:#fff;--text-primary:#212121;--text-secondary:#757575;--accent:#3264eb;--border:#d0d0d0}.theme-flexoki-light{color-scheme:light;--bg-primary:#fffcf0;--bg-secondary:#f2efe4;--text-primary:#100f0f;--text-secondary:#6f6e69;--accent:#205ea6;--border:#cecdc3}.theme-white{color-scheme:light;--bg-primary:#fff;--bg-secondary:#f5f5f5;--text-primary:#000;--text-secondary:grey;--accent:#6e6e6e;--border:#e8e8e8}body{background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--surface-hover:color-mix(in srgb,var(--text-primary) 9%,transparent);--surface-overlay:rgba(0,0,0,.55);--border-strong:color-mix(in srgb,var(--text-primary) 24%,var(--border));--accent-muted:color-mix(in srgb,var(--accent) 14%,var(--bg-secondary));--shadow-card:0 1px 2px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08);--shadow-card-hover:0 6px 16px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.12);--shadow-pop:0 12px 40px rgba(0,0,0,.34),0 4px 12px rgba(0,0,0,.2);--shadow-bar:0 1px 0 rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.16)}.theme-ayu-light,.theme-catppuccin-latte,.theme-everforest-light,.theme-flexoki-light,.theme-github-light,.theme-gruvbox-light,.theme-kanagawa-lotus,.theme-lupine,.theme-one-light,.theme-rose-pine,.theme-solarized-light,.theme-tokyo-night-day,.theme-white{--shadow-card:0 1px 2px rgba(76,79,105,.08),0 1px 3px rgba(76,79,105,.06);--shadow-card-hover:0 6px 16px rgba(76,79,105,.16),0 2px 6px rgba(76,79,105,.08);--shadow-pop:0 12px 40px rgba(76,79,105,.22),0 4px 12px rgba(76,79,105,.12);--shadow-bar:0 1px 0 rgba(76,79,105,.08),0 4px 16px rgba(76,79,105,.1)}select option{background-color:var(--bg-secondary);color:var(--text-primary)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}[x-cloak]{display:none!important}:root{--sidebar-w:16rem;--topbar-h:4rem}.app-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:60;background-color:var(--bg-secondary);border-right:1px solid color-mix(in srgb,var(--text-primary) 7%,transparent);display:flex;flex-direction:column;overflow-y:auto;transform:translateX(-100%);transition:transform .25s ease}.app-sidebar.is-open{transform:translateX(0)}.app-sidebar-backdrop{position:fixed;inset:0;z-index:55;background:var(--surface-overlay);opacity:0;pointer-events:none;transition:opacity .25s ease}.app-sidebar-backdrop.is-open{opacity:1;pointer-events:auto}.sidebar-panel{background-color:color-mix(in srgb,var(--text-primary) 4%,var(--bg-secondary));border:1px solid var(--border);border-radius:.75rem;padding:.375rem}.mode-toggle-active{background-color:var(--accent-muted);color:var(--text-primary)}@media (min-width:1024px){.app-sidebar{transform:none}.app-mobile-only,.app-sidebar-backdrop{display:none!important}}.app-topbar{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--topbar-h);background-color:color-mix(in srgb,var(--bg-secondary) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--text-primary) 6%,transparent)}body:has(.app-sidebar){padding-top:var(--topbar-h)}@media (min-width:1024px){body:has(.app-sidebar){padding-left:var(--sidebar-w)}.app-topbar{left:var(--sidebar-w)}}.app-subbar{position:sticky;top:var(--topbar-h);z-index:30}*{scrollbar-color:color-mix(in srgb,var(--text-primary) 22%,transparent) transparent}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:970px){.\!container{max-width:970px!important}.container{max-width:970px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-inline-start:1.625em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"\201C""\201D""\2018""\2019";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--text-primary);font-weight:400;font-size:.875em;background-color:var(--bg-primary)}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:""}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:""}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--text-primary);background-color:var(--bg-secondary);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body:var(--text-primary);--tw-prose-headings:var(--text-primary);--tw-prose-lead:var(--text-secondary);--tw-prose-links:var(--accent);--tw-prose-bold:var(--text-primary);--tw-prose-counters:var(--text-secondary);--tw-prose-bullets:var(--accent);--tw-prose-hr:var(--border);--tw-prose-quotes:var(--text-secondary);--tw-prose-quote-borders:var(--accent);--tw-prose-captions:var(--text-secondary);--tw-prose-kbd:#111827;--tw-prose-kbd-shadows:rgba(17,24,39,.1);--tw-prose-code:var(--text-primary);--tw-prose-pre-code:var(--text-primary);--tw-prose-pre-bg:var(--bg-secondary);--tw-prose-th-borders:var(--border);--tw-prose-td-borders:var(--border);--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:hsla(0,0%,100%,.1);--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.\!card{background-color:var(--bg-secondary)!important;border:1px solid color-mix(in srgb,var(--text-primary) 6%,transparent)!important;border-radius:1rem!important;box-shadow:var(--shadow-card)!important}.card{background-color:var(--bg-secondary);border:1px solid color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:1rem;box-shadow:var(--shadow-card)}.\!btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.5rem!important;padding:.5rem 1rem!important;border-radius:.625rem!important;font-size:.875rem!important;font-weight:500!important;line-height:1.25rem!important;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,border-color .15s ease!important;cursor:pointer!important;white-space:nowrap!important}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border-radius:.625rem;font-size:.875rem;font-weight:500;line-height:1.25rem;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,border-color .15s ease;cursor:pointer;white-space:nowrap}.\!btn:active{transform:translateY(1px)!important}.btn:active{transform:translateY(1px)}.\!btn:disabled{opacity:.5!important;cursor:not-allowed!important}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--accent);color:var(--bg-primary);box-shadow:var(--shadow-card)}.btn-primary:hover{background-color:color-mix(in srgb,var(--accent) 88%,#fff);box-shadow:var(--shadow-card-hover)}.btn-secondary{background-color:transparent;color:var(--text-primary);border:1px solid var(--border-strong)}.btn-secondary:hover{background-color:var(--surface-hover);border-color:var(--accent);color:var(--text-primary)}.btn-ghost{background-color:transparent;color:var(--text-secondary)}.btn-ghost:hover{background-color:var(--surface-hover);color:var(--text-primary)}.btn-danger{background-color:var(--status-danger);color:#fff}.btn-danger:hover{background-color:color-mix(in srgb,var(--status-danger) 88%,#fff)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.625rem;color:var(--text-secondary);transition:background-color .15s ease,color .15s ease;cursor:pointer}.icon-btn:hover{background-color:var(--surface-hover);color:var(--text-primary)}.\!input{width:100%!important;background-color:var(--bg-primary)!important;color:var(--text-primary)!important;border:1px solid var(--border)!important;border-radius:.625rem!important;padding:.5rem .75rem!important;font-size:.875rem!important;transition:border-color .15s ease,box-shadow .15s ease!important}.input{width:100%;background-color:var(--bg-primary);color:var(--text-primary);border:1px solid var(--border);border-radius:.625rem;padding:.5rem .75rem;font-size:.875rem;transition:border-color .15s ease,box-shadow .15s ease}.\!input::-moz-placeholder{color:color-mix(in srgb,var(--text-secondary) 75%,transparent)!important}.\!input::placeholder{color:color-mix(in srgb,var(--text-secondary) 75%,transparent)!important}.input::-moz-placeholder{color:color-mix(in srgb,var(--text-secondary) 75%,transparent)}.input::placeholder{color:color-mix(in srgb,var(--text-secondary) 75%,transparent)}.\!input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)!important;outline:none!important}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent);outline:none}.chip{gap:.375rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;background-color:var(--accent-muted);color:var(--text-primary)}.badge,.chip{display:inline-flex;align-items:center}.badge{padding:.125rem .5rem;border-radius:.375rem;font-size:.6875rem;font-weight:600;letter-spacing:.01em}.book-card{position:relative;background-color:var(--bg-secondary);border:1px solid color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:.75rem;overflow:hidden;box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.book-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}.book-card-cover{position:relative}.book-card-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%);opacity:0;transition:opacity .18s ease;pointer-events:none}.book-card:hover .book-card-cover:after{opacity:1}.book-card-action{position:absolute;top:0;left:0;right:0;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:2;transition:opacity .18s ease}.book-card:focus-within .book-card-action,.book-card:hover .book-card-action{opacity:1}.book-card-action-btn{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:9999px;background-color:color-mix(in srgb,var(--accent) 92%,#fff);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.4);pointer-events:auto;text-decoration:none}.book-card-meta{background-color:var(--bg-secondary);padding:.5rem .625rem}@media (hover:none){.book-card-action{opacity:1}}.brand-gradient{background-image:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,var(--bg-secondary)),var(--bg-secondary) 62%)}.hero-backdrop{position:absolute;inset:0;z-index:0;background-size:cover;background-position:50%;filter:blur(28px) saturate(1.4);transform:scale(1.15);opacity:.5}.hero-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--bg-primary) 35%,transparent),var(--bg-primary) 92%)}.stat-card{background-color:var(--bg-secondary);border:1px solid color-mix(in srgb,var(--text-primary) 6%,transparent);border-radius:1rem;padding:1.25rem;box-shadow:var(--shadow-card)}.loading-spinner{display:inline-block;width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.status-pending{background-color:color-mix(in srgb,var(--status-warning) 20%,transparent);color:var(--status-warning)}.status-processing{background-color:color-mix(in srgb,var(--status-info) 20%,transparent);color:var(--status-info)}.status-completed{background-color:color-mix(in srgb,var(--status-success) 20%,transparent);color:var(--status-success)}.status-failed{background-color:color-mix(in srgb,var(--status-danger) 20%,transparent);color:var(--status-danger)}.prose pre code.hljs{background-color:transparent!important}.prose code.hljs{background-color:var(--bg-primary)!important;padding:.2em .4em}.prose pre{background-color:var(--bg-secondary)!important}.prose .hljs{background-color:transparent!important;color:var(--text-primary)!important}.bg-theme-active,.bg-wood-active{background-color:var(--bg-primary)!important;box-shadow:inset 0 0 0 2px var(--accent)}.bg-theme-inactive,.bg-wood-inactive{background-color:var(--bg-secondary)!important}.bg-wood-dark,.bg-wood-light,.bg-wood-mahogany{background-attachment:fixed;background-position:50%;background-size:cover}.bg-wood-dark{background-image:url(/static/textures/wood-dark.png)}.bg-wood-light{background-image:url(/static/textures/wood-light.png)}.bg-wood-mahogany{background-image:url(/static/textures/wood-mahogany.png)}#collections-container.bg-wood-dark,#collections-container.bg-wood-light,#collections-container.bg-wood-mahogany,body.bg-wood-dark,body.bg-wood-light,body.bg-wood-mahogany{background-attachment:fixed;background-position:50%;background-size:cover}#collections-container[data-wood=wood-light]{--wood-text-primary:#1a1a1a;--wood-text-secondary:#4a4a4a;--wood-border:#8b5a2b}#collections-container[data-wood=wood-dark]{--wood-text-primary:#f5f5f5;--wood-text-secondary:silver;--wood-border:#7a5228}#collections-container[data-wood=wood-mahogany]{--wood-text-primary:#f5f5f5;--wood-text-secondary:silver;--wood-border:#8b3a3a}#collections-container[data-wood] a,#collections-container[data-wood] button,#collections-container[data-wood] h1,#collections-container[data-wood] h2,#collections-container[data-wood] h3,#collections-container[data-wood] p,#collections-container[data-wood] span{color:var(--wood-text-primary)!important}#collections-container[data-wood] .text-secondary{color:var(--wood-text-secondary)!important}#collections-container[data-wood=wood-light] a{color:#06c!important}#collections-container[data-wood=wood-dark] a,#collections-container[data-wood=wood-mahogany] a{color:#6cf!important}#collections-container[data-wood=wood-light] .carousel-nav-left{background:linear-gradient(90deg,rgba(0,0,0,.6),transparent)}#collections-container[data-wood=wood-light] .carousel-nav-right{background:linear-gradient(270deg,rgba(0,0,0,.6),transparent)}#collections-container[data-wood=wood-dark] .carousel-nav-left,#collections-container[data-wood=wood-mahogany] .carousel-nav-left{background:linear-gradient(90deg,rgba(0,0,0,.3),transparent)}#collections-container[data-wood=wood-dark] .carousel-nav-right,#collections-container[data-wood=wood-mahogany] .carousel-nav-right{background:linear-gradient(270deg,rgba(0,0,0,.3),transparent)}#collections-container[data-wood] .book-card{border:1px solid var(--wood-border)}.reader-icon{display:block;fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.reader-glass{background-color:color-mix(in srgb,var(--bg-primary) 70%,transparent);backdrop-filter:blur(18px) saturate(1.4);border-color:color-mix(in srgb,var(--border) 60%,transparent)}#reader-topbar.reader-glass{border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);box-shadow:0 4px 18px rgba(0,0,0,.16)}#reader-bottombar.reader-glass{border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);box-shadow:0 -4px 18px rgba(0,0,0,.16)}#reader-bottombar,#reader-topbar{transition:transform .3s ease,opacity .3s ease}#reader-chrome.chrome-hidden #reader-topbar{transform:translateY(-101%)}#reader-chrome.chrome-hidden #reader-bottombar{transform:translateY(101%)}#reader-bottombar button:hover,#reader-topbar a:hover,#reader-topbar button:hover{background-color:color-mix(in srgb,currentColor 13%,transparent)}#reader-bottombar button:focus-visible,#reader-topbar a:focus-visible,#reader-topbar button:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.reader-sep{background-color:color-mix(in srgb,var(--border) 80%,transparent)}.reader-select{background-color:color-mix(in srgb,var(--bg-primary) 55%,transparent);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);color:inherit}.reader-select:hover{border-color:#3b82f6}#reader-bottombar input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:18px;background:transparent;cursor:pointer;accent-color:#3b82f6}#reader-bottombar input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:9999px;background:color-mix(in srgb,currentColor 22%,transparent)}#reader-bottombar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-5px;width:14px;height:14px;border:none;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45);-webkit-transition:transform .12s ease;transition:transform .12s ease}#reader-bottombar input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}#reader-bottombar input[type=range]::-moz-range-track{height:4px;border-radius:9999px;background:color-mix(in srgb,currentColor 22%,transparent)}#reader-bottombar input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.45)}.drawer-scrim{position:fixed;inset:0;background-color:rgba(0,0,0,.45);z-index:45}.reader-drawer{position:fixed;top:0;bottom:0;width:340px;max-width:calc(100vw - 2rem);background-color:var(--bg-secondary);z-index:50;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.reader-drawer.left{left:0;border-right:1px solid var(--border)}.reader-drawer.right{right:0;border-left:1px solid var(--border)}@media (max-width:640px){.reader-drawer{width:100%;max-width:100%}}.reader-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}.reader-drawer-body{flex:1;overflow-y:auto;padding:1rem}.reader-seg{display:inline-flex;border:1px solid color-mix(in srgb,var(--border) 70%,transparent);background-color:color-mix(in srgb,var(--bg-primary) 50%,transparent);border-radius:.5rem;overflow:hidden}.reader-seg button{padding:.25rem .6rem;font-size:.75rem;line-height:1.25rem}.reader-seg button.active{background-color:#2563eb;color:#fff}.reader-seg button.\!active{background-color:#2563eb!important;color:#fff!important}.theme-swatch{height:2.25rem;border-radius:.5rem;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}.theme-swatch:hover{border-color:#3b82f6}.reader-popover{position:fixed;transform:translate(-50%,calc(-100% - 10px));background-color:color-mix(in srgb,var(--bg-primary) 85%,transparent);backdrop-filter:blur(16px) saturate(1.3);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:.75rem;box-shadow:0 8px 28px rgba(0,0,0,.35);padding:.5rem .625rem;z-index:60}.color-dot{width:1.375rem;height:1.375rem;border-radius:9999px;border:2px solid rgba(0,0,0,.25);transition:transform .12s ease}.color-dot:hover{transform:scale(1.15)}.color-dot.selected{border-color:#fff;box-shadow:0 0 0 2px #3b82f6}.reader-popover-btn{padding:.3rem;border-radius:.375rem;color:inherit}.reader-popover-btn:hover{background-color:color-mix(in srgb,currentColor 13%,transparent)}.reader-popover-btn.danger:hover{background-color:rgba(153,27,27,.6)}.adjust-handle{position:fixed;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#3b82f6;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4);pointer-events:auto;cursor:grab;touch-action:none}.adjust-handle[data-which=end]{border-radius:50% 50% 0 50%;transform:rotate(45deg)}.adjust-handle[data-dragging]{cursor:grabbing;scale:1.15}.reader-note-input{width:100%;resize:vertical;padding:.5rem;border-radius:.5rem;font-size:.875rem;color:inherit;background-color:color-mix(in srgb,var(--bg-primary) 55%,transparent);border:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.reader-note-input:focus{outline:2px solid #3b82f6;outline-offset:1px}.note-rich p{margin:0}.note-rich p+p{margin-top:.6em}.note-rich h1,.note-rich h2,.note-rich h3,.note-rich h4,.note-rich h5,.note-rich h6{margin:.8em 0 .4em;font-weight:600;line-height:1.3}.note-rich h1{font-size:1.25em}.note-rich h2{font-size:1.15em}.note-rich h3,.note-rich h4{font-size:1.05em}.note-rich h5,.note-rich h6{font-size:1em}.note-rich blockquote{margin:.6em 0;padding:.1em 0 .1em .75em;border-left:3px solid color-mix(in srgb,var(--text-secondary) 55%,transparent);color:var(--text-secondary)}.note-rich ol,.note-rich ul{margin:.6em 0;padding-left:1.4em}.note-rich ul{list-style:disc}.note-rich ol{list-style:decimal}.note-rich li{margin:.15em 0}.note-rich li+li{margin-top:.25em}.note-rich li>p{margin:0}.note-rich pre{margin:.6em 0;padding:.6em .75em;overflow-x:auto;border-radius:.375rem;background-color:color-mix(in srgb,var(--bg-secondary) 80%,transparent);border:1px solid color-mix(in srgb,var(--border) 70%,transparent)}.note-rich pre code{background:none;padding:0;font-size:.9em}.note-rich code{font-size:.9em;padding:.1em .3em;border-radius:.25rem;background-color:color-mix(in srgb,var(--bg-secondary) 80%,transparent)}.note-rich a{text-decoration:underline;text-underline-offset:2px}.note-rich hr{margin:.8em 0}.note-rich table{margin:.6em 0;border-collapse:collapse;font-size:.95em}.note-rich td,.note-rich th{border:1px solid var(--border);padding:.25em .5em;text-align:left}.note-rich th{font-weight:600}.reader-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}.reader-tabs button{flex:1;padding:.5rem .25rem;font-size:.8125rem;color:var(--text-secondary);border-bottom:2px solid transparent}.reader-tabs button.active{color:var(--text-primary);border-bottom-color:#3b82f6}.reader-tabs button.\!active{color:var(--text-primary)!important;border-bottom-color:#3b82f6!important}.reader-tab-count{display:inline-block;min-width:1.25rem;margin-left:.25rem;padding:0 .25rem;border-radius:9999px;font-size:.6875rem;line-height:1.1rem;background-color:color-mix(in srgb,currentColor 13%,transparent)}.reader-hl-row{display:flex;align-items:center;gap:.25rem}.reader-tools-popover{position:absolute;bottom:100%;right:.5rem;margin-bottom:.5rem;min-width:16rem;max-width:calc(100vw - 1.5rem);max-height:min(26rem,65vh);overflow-y:auto;background-color:color-mix(in srgb,var(--bg-primary) 88%,transparent);backdrop-filter:blur(18px) saturate(1.3);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:.75rem;box-shadow:0 -6px 28px rgba(0,0,0,.35);padding:.25rem}.reader-tools-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .75rem;font-size:.875rem;border-radius:.5rem}.reader-tools-row+.reader-tools-row{border-top:1px solid color-mix(in srgb,var(--border) 45%,transparent)}.reader-tools-row:hover{background-color:color-mix(in srgb,currentColor 6%,transparent)}#reader-view::part(filter){filter:var(--fx-filter,none)}.reader-thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.reader-thumb{position:relative;border-radius:.375rem;overflow:hidden;border:2px solid transparent;padding:0;background-color:color-mix(in srgb,currentColor 6%,transparent)}.reader-thumb:hover{border-color:color-mix(in srgb,currentColor 30%,transparent)}.reader-thumb.active{border-color:#3b82f6}.reader-thumb.\!active{border-color:#3b82f6!important}.reader-thumb-img{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;overflow:hidden}.reader-thumb-img canvas,.reader-thumb-img img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.reader-thumb-num{position:absolute;bottom:.2rem;right:.35rem;font-size:.65rem;line-height:1;padding:.15rem .3rem;border-radius:.25rem;background-color:rgba(0,0,0,.55);color:#fff}.reader-edge-zone{position:absolute;top:0;bottom:0;width:8%;max-width:72px;min-width:44px;z-index:10;display:none;align-items:center;cursor:pointer}.reader-edge-zone.left{left:0;justify-content:flex-start;padding-left:.75rem}.reader-edge-zone.right{right:0;justify-content:flex-end;padding-right:.75rem}.reader-edge-zone:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .15s ease}.reader-edge-zone.left:before{background:linear-gradient(90deg,hsla(0,0%,100%,.08),transparent)}.reader-edge-zone.right:before{background:linear-gradient(270deg,hsla(0,0%,100%,.08),transparent)}.reader-edge-zone .reader-icon{color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));opacity:0;transition:opacity .15s ease}.reader-edge-zone:hover:before{opacity:1}.reader-edge-zone:hover .reader-icon{opacity:.85}@media (hover:hover) and (pointer:fine){.reader-edge-zone{display:flex}}.reader-help-backdrop{position:fixed;inset:0;background-color:rgba(0,0,0,.5);z-index:70}.reader-help{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(34rem,calc(100vw - 2rem));max-height:min(38rem,calc(100vh - 4rem));display:flex;flex-direction:column;background-color:color-mix(in srgb,var(--bg-primary) 90%,transparent);backdrop-filter:blur(20px) saturate(1.3);border:1px solid color-mix(in srgb,var(--border) 70%,transparent);border-radius:.875rem;box-shadow:0 16px 48px rgba(0,0,0,.45);z-index:71}.reader-help-header{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0}.reader-help-body{overflow-y:auto;padding:1rem 1.25rem}.reader-help-section{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin:1.1rem 0 .4rem}.reader-help-body .reader-help-section:first-child{margin-top:0}.help-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.3rem 0;font-size:.85rem}.help-row>span:first-child{color:var(--text-primary)}.help-keys{text-align:right;font-size:.8rem;white-space:nowrap}.help-keys,.help-note{color:var(--text-secondary)}.help-note{font-size:.75rem}.kbd{display:inline-block;min-width:1.4rem;text-align:center;padding:.05rem .4rem;margin:0 .1rem;border-radius:.3rem;border:solid color-mix(in srgb,var(--border) 80%,transparent);border-width:1px 1px 2px;background-color:color-mix(in srgb,currentColor 8%,transparent);font-family:ui-monospace,monospace;font-size:.72rem;line-height:1.2rem}.reader-search-bar{display:flex;align-items:center;gap:.375rem;padding:.625rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}.reader-search-status{padding:.375rem 1rem;font-size:.75rem;color:var(--text-secondary);border-bottom:1px solid color-mix(in srgb,var(--border) 50%,transparent);flex-shrink:0;min-height:1.75rem}.search-result{display:block;padding:.375rem .5rem;border-radius:.375rem;font-size:.8125rem;line-height:1.35}.search-result:hover{background-color:color-mix(in srgb,currentColor 9%,transparent)}.search-result mark{background-color:rgba(255,213,79,.4);color:inherit;border-radius:2px;padding:0 1px}.stacked-covers{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden}.stacked-covers .cover-img{position:absolute;width:70%;height:90%;-o-object-fit:cover;object-fit:cover;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.4)}.stacked-covers.cover-count-1 .cover-0{top:5%;left:15%}.stacked-covers.cover-count-2 .cover-0{top:8%;left:5%;transform:rotate(-6deg);z-index:1}.stacked-covers.cover-count-2 .cover-1{top:2%;left:25%;transform:rotate(3deg);z-index:2}.stacked-covers.cover-count-3 .cover-0{top:12%;left:2%;transform:rotate(-8deg);z-index:1}.stacked-covers.cover-count-3 .cover-1{top:6%;left:15%;transform:rotate(-2deg);z-index:2}.stacked-covers.cover-count-3 .cover-2{top:0;left:30%;transform:rotate(4deg);z-index:3}.stacked-covers.cover-count-4 .cover-0{top:14%;left:0;width:65%;height:85%;transform:rotate(-10deg);z-index:1}.stacked-covers.cover-count-4 .cover-1{top:10%;left:12%;width:65%;height:85%;transform:rotate(-4deg);z-index:2}.stacked-covers.cover-count-4 .cover-2{top:5%;left:22%;width:65%;height:85%;transform:rotate(2deg);z-index:3}.stacked-covers.cover-count-4 .cover-3{top:0;left:32%;width:65%;height:85%;transform:rotate(6deg);z-index:4}.stacked-covers.cover-count-5 .cover-0,.stacked-covers.cover-count-6 .cover-0,.stacked-covers.cover-count-7 .cover-0{top:16%;left:-2%;width:62%;height:82%;transform:rotate(-12deg);z-index:1}.stacked-covers.cover-count-5 .cover-1,.stacked-covers.cover-count-6 .cover-1,.stacked-covers.cover-count-7 .cover-1{top:12%;left:8%;width:62%;height:82%;transform:rotate(-6deg);z-index:2}.stacked-covers.cover-count-5 .cover-2,.stacked-covers.cover-count-6 .cover-2,.stacked-covers.cover-count-7 .cover-2{top:8%;left:17%;width:62%;height:82%;transform:rotate(-1deg);z-index:3}.stacked-covers.cover-count-5 .cover-3,.stacked-covers.cover-count-6 .cover-3,.stacked-covers.cover-count-7 .cover-3{top:4%;left:26%;width:62%;height:82%;transform:rotate(4deg);z-index:4}.stacked-covers.cover-count-5 .cover-4,.stacked-covers.cover-count-6 .cover-4,.stacked-covers.cover-count-7 .cover-4{top:0;left:35%;width:62%;height:82%;transform:rotate(9deg);z-index:5}.stacked-covers.cover-count-6 .cover-5,.stacked-covers.cover-count-7 .cover-5{top:-2%;left:30%;width:60%;height:80%;transform:rotate(13deg);z-index:6}.stacked-covers.cover-count-7 .cover-6{top:-4%;left:25%;width:58%;height:78%;transform:rotate(16deg);z-index:7}.series-card{transition:transform .2s ease,box-shadow .2s ease}.series-card:hover{transform:translateY(-4px)}@keyframes skeleton-shimmer{to{transform:translateX(100%)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.\!visible{visibility:visible!important}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.bottom-0{bottom:0}.bottom-0\.5{bottom:.125rem}.bottom-1{bottom:.25rem}.bottom-24{bottom:6rem}.bottom-full{bottom:100%}.end-1{inset-inline-end:.25rem}.left-0{left:0}.left-0\.5{left:.125rem}.left-1{left:.25rem}.left-1\/2{left:50%}.left-3{left:.75rem}.right-0{right:0}.right-1{right:.25rem}.right-2{right:.5rem}.right-4{right:1rem}.right-5{right:1.25rem}.top-0{top:0}.top-0\.5{top:.125rem}.top-1{top:.25rem}.top-1\/2{top:50%}.top-14{top:3.5rem}.top-16{top:4rem}.top-2{top:.5rem}.top-4{top:1rem}.top-5{top:1.25rem}.top-6{top:1.5rem}.top-full{top:100%}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[60\]{z-index:60}.z-\[65\]{z-index:65}.z-\[70\]{z-index:70}.z-\[9999\]{z-index:9999}.col-span-full{grid-column:1/-1}.-m-2{margin:-.5rem}.-m-4{margin:-1rem}.m-0{margin:0}.m-1{margin:.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1\.5{margin-top:.375rem;margin-bottom:.375rem}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.\!grid{display:grid!important}.grid{display:grid}.inline-grid{display:inline-grid}.contents{display:contents}.hidden{display:none}.aspect-\[2\/3\]{aspect-ratio:2/3}.aspect-\[3\/4\]{aspect-ratio:3/4}.h-0\.5{height:.125rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-72{height:18rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-96{height:24rem}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-32{max-height:8rem}.max-h-48{max-height:12rem}.max-h-60{max-height:15rem}.max-h-64{max-height:16rem}.max-h-72{max-height:18rem}.max-h-96{max-height:24rem}.max-h-\[20rem\]{max-height:20rem}.max-h-\[70vh\]{max-height:70vh}.max-h-\[80vh\]{max-height:80vh}.max-h-\[90vh\]{max-height:90vh}.min-h-0{min-height:0}.min-h-\[150px\]{min-height:150px}.min-h-\[60px\]{min-height:60px}.min-h-screen{min-height:100vh}.w-0\.5{width:.125rem}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-28{width:7rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-32{width:8rem}.w-36{width:9rem}.w-4{width:1rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[150px\]{min-width:150px}.min-w-\[190px\]{min-width:190px}.min-w-\[200px\]{min-width:200px}.min-w-\[3\.5rem\]{min-width:3.5rem}.min-w-\[300px\]{min-width:300px}.min-w-\[3rem\]{min-width:3rem}.min-w-\[4\.75rem\]{min-width:4.75rem}.min-w-\[4rem\]{min-width:4rem}.min-w-\[7\.5rem\]{min-width:7.5rem}.min-w-\[7rem\]{min-width:7rem}.min-w-\[8\.5rem\]{min-width:8.5rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-72{max-width:18rem}.max-w-7xl{max-width:80rem}.max-w-\[500px\]{max-width:500px}.max-w-\[5rem\]{max-width:5rem}.max-w-\[calc\(100vw-2rem\)\]{max-width:calc(100vw - 2rem)}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x:-100%}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.-translate-y-2\.5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-2\.5{--tw-translate-y:-0.625rem}.-translate-y-4{--tw-translate-y:-1rem}.-translate-y-4,.-translate-y-5{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-5{--tw-translate-y:-1.25rem}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-4{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-4{--tw-translate-x:1rem}.translate-x-7{--tw-translate-x:1.75rem}.translate-x-7,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-2{--tw-translate-y:0.5rem}.rotate-180{--tw-rotate:180deg}.rotate-180,.scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.resize-y{resize:vertical}.resize{resize:both}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-start{scroll-snap-align:start}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-1{row-gap:.25rem}.gap-y-4{row-gap:1rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.self-stretch{align-self:stretch}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overscroll-none{overscroll-behavior:none}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.875rem}.rounded-b-2xl{border-bottom-right-radius:1.25rem;border-bottom-left-radius:1.25rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-r{border-right-width:1px}.border-r-2{border-right-width:2px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[var\(--border\)\]{border-color:var(--border)}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.border-current{border-color:currentColor}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-line{border-color:var(--border)}.border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/40{border-color:hsla(0,0%,100%,.4)}.border-yellow-500{--tw-border-opacity:1;border-color:rgb(234 179 8/var(--tw-border-opacity,1))}.border-t-transparent{border-top-color:transparent}.bg-\[var\(--accent\)\]{background-color:var(--accent)}.bg-\[var\(--bg-secondary\)\]{background-color:var(--bg-secondary)}.bg-\[var\(--border\)\]{background-color:var(--border)}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-500\/90{background-color:rgba(59,130,246,.9)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-500\/90{background-color:rgba(34,197,94,.9)}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\/90{background-color:rgba(239,68,68,.9)}.bg-surface-hover{background-color:var(--surface-hover)}.bg-surface-raised{background-color:var(--bg-secondary)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/20{background-color:hsla(0,0%,100%,.2)}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgb(234 179 8/var(--tw-bg-opacity,1))}.bg-yellow-500\/90{background-color:rgba(234,179,8,.9)}.bg-opacity-40{--tw-bg-opacity:0.4}.bg-opacity-80{--tw-bg-opacity:0.8}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-wood-dark{background-image:url(/static/textures/wood-dark.png)}.bg-wood-light{background-image:url(/static/textures/wood-light.png)}.bg-wood-mahogany{background-image:url(/static/textures/wood-mahogany.png)}.from-gray-700{--tw-gradient-from:#374151 var(--tw-gradient-from-position);--tw-gradient-to:rgba(55,65,81,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-900{--tw-gradient-from:#111827 var(--tw-gradient-from-position);--tw-gradient-to:rgba(17,24,39,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-gray-900{--tw-gradient-to:#111827 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-center{background-position:50%}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pb-\[env\(safe-area-inset-bottom\)\]{padding-bottom:env(safe-area-inset-bottom)}.pl-1{padding-left:.25rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pl-7{padding-left:1.75rem}.pl-9{padding-left:2.25rem}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.pr-7{padding-right:1.75rem}.pr-8{padding-right:2rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-6{padding-top:1.5rem}.pt-\[env\(safe-area-inset-top\)\]{padding-top:env(safe-area-inset-top)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-\[var\(--bg-primary\)\]{color:var(--bg-primary)}.text-\[var\(--text-secondary\)\]{color:var(--text-secondary)}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-content-muted{color:var(--text-secondary)}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-current{accent-color:currentColor}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-25{opacity:.25}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-pop{--tw-shadow:var(--shadow-pop);--tw-shadow-colored:var(--shadow-pop)}.shadow-pop,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-black\/10{--tw-ring-color:rgba(0,0,0,.1)}.ring-blue-500{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}.blur{--tw-blur:blur(8px)}.blur,.grayscale{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%)}.invert{--tw-invert:invert(100%)}.invert,.sepia{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia:sepia(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@view-transition{navigation:auto}#selection-handles{position:fixed;inset:0;pointer-events:none;z-index:55}#selection-handles .sel-handle{position:absolute;top:0;left:0;width:12px;height:24px;pointer-events:auto;touch-action:none;background:#8ab4f8;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.45);opacity:.95}#selection-handles .sel-handle:before{content:"";position:absolute;top:-4px;left:50%;width:2px;height:5px;background:inherit;transform:translateX(-50%)}.fb-connective{font-size:.65rem;font-weight:700;letter-spacing:.05em;color:var(--text-secondary);min-width:1.6rem}.fb-picker{font-size:.8rem;padding:.3rem .6rem;border-radius:.5rem;border:1px solid var(--border);background-color:var(--bg-primary);color:var(--text-primary);cursor:pointer;white-space:nowrap}.fb-picker:hover{background-color:var(--surface-hover)}.fb-picker-active{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.fb-picker-op{color:var(--text-secondary)}.fb-negated-text{color:var(--status-danger)}.fb-value{width:9rem;font-size:.8rem;padding:.3rem .5rem}.fb-menu{position:absolute;z-index:60;margin-top:.25rem;width:15rem;max-height:16rem;overflow-y:auto;border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.25);background-color:var(--bg-primary);border:1px solid var(--border)}.fb-menu-value{width:16rem;left:0;top:100%;margin-top:.25rem}.fb-menu-group{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--text-secondary);padding:.4rem .75rem .3rem;margin-top:.3rem;background-color:color-mix(in srgb,var(--text-primary) 5%,transparent);border-top:1px solid var(--border)}.fb-menu-filter-wrap,.fb-menu-group{border-bottom:1px solid var(--border)}.fb-menu-filter-wrap{padding:.4rem .5rem;background-color:var(--bg-primary)}.fb-menu-filter{width:100%;font-size:.8rem;padding:.3rem .5rem;border-radius:.4rem;border:1px solid var(--border);background-color:var(--bg-primary);color:var(--text-primary);outline:none}.fb-menu-filter:focus{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.fb-menu-empty{font-size:.78rem;color:var(--text-secondary);padding:.6rem .75rem}.fb-menu-item{display:flex;width:100%;justify-content:space-between;align-items:center;gap:.5rem;text-align:left;font-size:.8rem;padding:.35rem .75rem .35rem 1.7rem;color:var(--text-primary);cursor:pointer}.fb-menu-item:hover{background-color:var(--surface-hover)}.fb-menu-item-active{color:var(--accent)}.fb-mode-btn{font-size:.65rem;font-weight:700;letter-spacing:.05em;padding:.15rem .5rem;border-radius:9999px;border:1px solid var(--border);background-color:var(--bg-primary);color:var(--text-secondary);cursor:pointer}.fb-mode-btn.fb-mode-active{background-color:var(--accent-muted);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent)}.fb-mini-btn{font-size:.7rem;padding:.15rem .5rem;border-radius:.4rem;border:1px dashed var(--border);background-color:transparent;color:var(--text-secondary);cursor:pointer;white-space:nowrap}.fb-mini-btn:hover{background-color:var(--surface-hover);color:var(--text-primary)}.fb-mini-btn.fb-danger{border-style:solid;color:var(--status-danger)}.fb-group-end{height:.5rem;margin-top:-.25rem}.fb-group-end,.fb-nested{border-left:2px solid var(--border)}.fb-nested{padding-left:.6rem}.fb-connective-btn{font-size:.65rem;font-weight:700;letter-spacing:.05em;color:var(--text-secondary);min-width:1.9rem;padding:.1rem .3rem;border:1px dashed var(--border);border-radius:.4rem;background-color:transparent;cursor:pointer;text-align:center}.fb-connective-btn:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.fb-chip-static{border-style:solid;opacity:.7;cursor:default}.fb-menu-fields{display:flex;flex-direction:column;max-height:18rem;overflow:hidden}.fb-menu-fields .fb-menu-filter-wrap{flex-shrink:0;border-bottom:1px solid var(--border)}.fb-menu-fields .fb-menu-scroll{overflow-y:auto;min-height:0}.fb-value-cell .fb-menu-empty{padding:.5rem .75rem;font-size:.78rem;color:var(--text-secondary)}@media (min-width:768px){.md\:container{width:100%}@media (min-width:640px){.md\:container{max-width:640px}}@media (min-width:768px){.md\:container{max-width:768px}}@media (min-width:970px){.md\:container{max-width:970px}}@media (min-width:1024px){.md\:container{max-width:1024px}}@media (min-width:1280px){.md\:container{max-width:1280px}}@media (min-width:1536px){.md\:container{max-width:1536px}}}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:h-5:after{content:var(--tw-content);height:1.25rem}.after\:w-5:after{content:var(--tw-content);width:1.25rem}.after\:rounded-full:after{content:var(--tw-content);border-radius:9999px}.after\:bg-white:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.first\:mt-0:first-child{margin-top:0}.last\:border-b-0:last-child{border-bottom-width:0}.hover\:border-opacity-50:hover{--tw-border-opacity:0.5}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-gray-600:hover{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.hover\:bg-red-900\/60:hover{background-color:rgba(127,29,29,.6)}.hover\:bg-surface-hover:hover{background-color:var(--surface-hover)}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-white\/30:hover{background-color:hsla(0,0%,100%,.3)}.hover\:bg-opacity-50:hover{--tw-bg-opacity:0.5}.hover\:bg-opacity-80:hover{--tw-bg-opacity:0.8}.hover\:text-brand:hover{color:var(--accent)}.hover\:text-content:hover{color:var(--text-primary)}.hover\:text-green-700:hover{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.hover\:text-red-700:hover{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:ring-2:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.hover\:ring-blue-400:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.hover\:ring-green-400:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(74 222 128/var(--tw-ring-opacity,1))}.hover\:ring-purple-400:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(192 132 252/var(--tw-ring-opacity,1))}.hover\:ring-red-400:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(248 113 113/var(--tw-ring-opacity,1))}.hover\:ring-yellow-400:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(250 204 21/var(--tw-ring-opacity,1))}.hover\:ring-offset-2:hover{--tw-ring-offset-width:2px}.hover\:ring-offset-transparent:hover{--tw-ring-offset-color:transparent}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.group[open] .group-open\:rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:pointer-events-auto{pointer-events:auto}.group:hover .group-hover\:opacity-100{opacity:1}.peer:checked~.peer-checked\:translate-x-5{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:checked~.peer-checked\:border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.peer:checked~.peer-checked\:bg-brand{background-color:var(--accent)}.peer:checked~.peer-checked\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:checked~.peer-checked\:ring-blue-400{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}.peer:checked~.peer-checked\:after\:translate-x-full:after{content:var(--tw-content);--tw-translate-x:100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:ml-auto{margin-left:auto}.sm\:block{display:block}.sm\:inline{display:inline}.sm\:w-20{width:5rem}.sm\:w-40{width:10rem}.sm\:w-96{width:24rem}.sm\:max-w-none{max-width:none}.sm\:flex-none{flex:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-1{gap:.25rem}.sm\:gap-3{gap:.75rem}.sm\:truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sm\:p-2{padding:.5rem}.sm\:p-5{padding:1.25rem}.sm\:px-2{padding-left:.5rem;padding-right:.5rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-2{padding-top:.5rem;padding-bottom:.5rem}.sm\:py-20{padding-top:5rem;padding-bottom:5rem}.sm\:py-28{padding-top:7rem;padding-bottom:7rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-6xl{font-size:3.75rem;line-height:1}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:mx-0{margin-left:0;margin-right:0}.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-80{height:20rem}.md\:w-56{width:14rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-5{gap:1.25rem}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:bottom-auto{bottom:auto}.lg\:z-10{z-index:10}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:hidden{display:none}.lg\:h-\[calc\(100vh-3\.5rem\)\]{height:calc(100vh - 3.5rem)}.lg\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.lg\:py-36{padding-top:9rem;padding-bottom:9rem}}@media (min-width:1280px){.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}
\ No newline at end of file