@aigne/afs-ui 1.11.0-beta.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/LICENSE.md +26 -0
  2. package/dist/_virtual/_@oxc-project_runtime@0.108.0/helpers/decorate.cjs +11 -0
  3. package/dist/_virtual/_@oxc-project_runtime@0.108.0/helpers/decorate.mjs +10 -0
  4. package/dist/aup-protocol.cjs +235 -0
  5. package/dist/aup-protocol.d.cts +78 -0
  6. package/dist/aup-protocol.d.cts.map +1 -0
  7. package/dist/aup-protocol.d.mts +78 -0
  8. package/dist/aup-protocol.d.mts.map +1 -0
  9. package/dist/aup-protocol.mjs +235 -0
  10. package/dist/aup-protocol.mjs.map +1 -0
  11. package/dist/aup-registry.cjs +2489 -0
  12. package/dist/aup-registry.mjs +2487 -0
  13. package/dist/aup-registry.mjs.map +1 -0
  14. package/dist/aup-spec.cjs +1467 -0
  15. package/dist/aup-spec.mjs +1466 -0
  16. package/dist/aup-spec.mjs.map +1 -0
  17. package/dist/aup-types.cjs +165 -0
  18. package/dist/aup-types.d.cts +157 -0
  19. package/dist/aup-types.d.cts.map +1 -0
  20. package/dist/aup-types.d.mts +157 -0
  21. package/dist/aup-types.d.mts.map +1 -0
  22. package/dist/aup-types.mjs +157 -0
  23. package/dist/aup-types.mjs.map +1 -0
  24. package/dist/backend.cjs +14 -0
  25. package/dist/backend.d.cts +104 -0
  26. package/dist/backend.d.cts.map +1 -0
  27. package/dist/backend.d.mts +104 -0
  28. package/dist/backend.d.mts.map +1 -0
  29. package/dist/backend.mjs +13 -0
  30. package/dist/backend.mjs.map +1 -0
  31. package/dist/degradation.cjs +85 -0
  32. package/dist/degradation.d.cts +17 -0
  33. package/dist/degradation.d.cts.map +1 -0
  34. package/dist/degradation.d.mts +17 -0
  35. package/dist/degradation.d.mts.map +1 -0
  36. package/dist/degradation.mjs +84 -0
  37. package/dist/degradation.mjs.map +1 -0
  38. package/dist/index.cjs +36 -0
  39. package/dist/index.d.cts +12 -0
  40. package/dist/index.d.mts +12 -0
  41. package/dist/index.mjs +13 -0
  42. package/dist/runtime.cjs +117 -0
  43. package/dist/runtime.d.cts +59 -0
  44. package/dist/runtime.d.cts.map +1 -0
  45. package/dist/runtime.d.mts +59 -0
  46. package/dist/runtime.d.mts.map +1 -0
  47. package/dist/runtime.mjs +118 -0
  48. package/dist/runtime.mjs.map +1 -0
  49. package/dist/session.cjs +159 -0
  50. package/dist/session.d.cts +80 -0
  51. package/dist/session.d.cts.map +1 -0
  52. package/dist/session.d.mts +80 -0
  53. package/dist/session.d.mts.map +1 -0
  54. package/dist/session.mjs +159 -0
  55. package/dist/session.mjs.map +1 -0
  56. package/dist/snapshot.cjs +162 -0
  57. package/dist/snapshot.mjs +163 -0
  58. package/dist/snapshot.mjs.map +1 -0
  59. package/dist/term-page.cjs +264 -0
  60. package/dist/term-page.mjs +264 -0
  61. package/dist/term-page.mjs.map +1 -0
  62. package/dist/term.cjs +295 -0
  63. package/dist/term.d.cts +84 -0
  64. package/dist/term.d.cts.map +1 -0
  65. package/dist/term.d.mts +84 -0
  66. package/dist/term.d.mts.map +1 -0
  67. package/dist/term.mjs +296 -0
  68. package/dist/term.mjs.map +1 -0
  69. package/dist/tty.cjs +136 -0
  70. package/dist/tty.d.cts +53 -0
  71. package/dist/tty.d.cts.map +1 -0
  72. package/dist/tty.d.mts +53 -0
  73. package/dist/tty.d.mts.map +1 -0
  74. package/dist/tty.mjs +135 -0
  75. package/dist/tty.mjs.map +1 -0
  76. package/dist/ui-provider.cjs +4615 -0
  77. package/dist/ui-provider.d.cts +307 -0
  78. package/dist/ui-provider.d.cts.map +1 -0
  79. package/dist/ui-provider.d.mts +307 -0
  80. package/dist/ui-provider.d.mts.map +1 -0
  81. package/dist/ui-provider.mjs +4616 -0
  82. package/dist/ui-provider.mjs.map +1 -0
  83. package/dist/web-page/core.cjs +1388 -0
  84. package/dist/web-page/core.mjs +1387 -0
  85. package/dist/web-page/core.mjs.map +1 -0
  86. package/dist/web-page/css.cjs +1699 -0
  87. package/dist/web-page/css.mjs +1698 -0
  88. package/dist/web-page/css.mjs.map +1 -0
  89. package/dist/web-page/icons.cjs +248 -0
  90. package/dist/web-page/icons.mjs +248 -0
  91. package/dist/web-page/icons.mjs.map +1 -0
  92. package/dist/web-page/overlay-themes.cjs +514 -0
  93. package/dist/web-page/overlay-themes.mjs +513 -0
  94. package/dist/web-page/overlay-themes.mjs.map +1 -0
  95. package/dist/web-page/renderers/action.cjs +72 -0
  96. package/dist/web-page/renderers/action.mjs +72 -0
  97. package/dist/web-page/renderers/action.mjs.map +1 -0
  98. package/dist/web-page/renderers/broadcast.cjs +160 -0
  99. package/dist/web-page/renderers/broadcast.mjs +160 -0
  100. package/dist/web-page/renderers/broadcast.mjs.map +1 -0
  101. package/dist/web-page/renderers/calendar.cjs +137 -0
  102. package/dist/web-page/renderers/calendar.mjs +137 -0
  103. package/dist/web-page/renderers/calendar.mjs.map +1 -0
  104. package/dist/web-page/renderers/canvas.cjs +173 -0
  105. package/dist/web-page/renderers/canvas.mjs +173 -0
  106. package/dist/web-page/renderers/canvas.mjs.map +1 -0
  107. package/dist/web-page/renderers/cdn-loader.cjs +25 -0
  108. package/dist/web-page/renderers/cdn-loader.mjs +25 -0
  109. package/dist/web-page/renderers/cdn-loader.mjs.map +1 -0
  110. package/dist/web-page/renderers/chart.cjs +101 -0
  111. package/dist/web-page/renderers/chart.mjs +101 -0
  112. package/dist/web-page/renderers/chart.mjs.map +1 -0
  113. package/dist/web-page/renderers/deck.cjs +390 -0
  114. package/dist/web-page/renderers/deck.mjs +390 -0
  115. package/dist/web-page/renderers/deck.mjs.map +1 -0
  116. package/dist/web-page/renderers/device.cjs +1015 -0
  117. package/dist/web-page/renderers/device.mjs +1015 -0
  118. package/dist/web-page/renderers/device.mjs.map +1 -0
  119. package/dist/web-page/renderers/editor.cjs +127 -0
  120. package/dist/web-page/renderers/editor.mjs +127 -0
  121. package/dist/web-page/renderers/editor.mjs.map +1 -0
  122. package/dist/web-page/renderers/finance-chart.cjs +178 -0
  123. package/dist/web-page/renderers/finance-chart.mjs +178 -0
  124. package/dist/web-page/renderers/finance-chart.mjs.map +1 -0
  125. package/dist/web-page/renderers/frame.cjs +274 -0
  126. package/dist/web-page/renderers/frame.mjs +274 -0
  127. package/dist/web-page/renderers/frame.mjs.map +1 -0
  128. package/dist/web-page/renderers/globe.cjs +119 -0
  129. package/dist/web-page/renderers/globe.mjs +119 -0
  130. package/dist/web-page/renderers/globe.mjs.map +1 -0
  131. package/dist/web-page/renderers/input.cjs +137 -0
  132. package/dist/web-page/renderers/input.mjs +137 -0
  133. package/dist/web-page/renderers/input.mjs.map +1 -0
  134. package/dist/web-page/renderers/list.cjs +1243 -0
  135. package/dist/web-page/renderers/list.mjs +1243 -0
  136. package/dist/web-page/renderers/list.mjs.map +1 -0
  137. package/dist/web-page/renderers/map.cjs +126 -0
  138. package/dist/web-page/renderers/map.mjs +126 -0
  139. package/dist/web-page/renderers/map.mjs.map +1 -0
  140. package/dist/web-page/renderers/media.cjs +106 -0
  141. package/dist/web-page/renderers/media.mjs +106 -0
  142. package/dist/web-page/renderers/media.mjs.map +1 -0
  143. package/dist/web-page/renderers/moonphase.cjs +105 -0
  144. package/dist/web-page/renderers/moonphase.mjs +105 -0
  145. package/dist/web-page/renderers/moonphase.mjs.map +1 -0
  146. package/dist/web-page/renderers/natal-chart.cjs +222 -0
  147. package/dist/web-page/renderers/natal-chart.mjs +222 -0
  148. package/dist/web-page/renderers/natal-chart.mjs.map +1 -0
  149. package/dist/web-page/renderers/overlay.cjs +531 -0
  150. package/dist/web-page/renderers/overlay.mjs +531 -0
  151. package/dist/web-page/renderers/overlay.mjs.map +1 -0
  152. package/dist/web-page/renderers/table.cjs +74 -0
  153. package/dist/web-page/renderers/table.mjs +74 -0
  154. package/dist/web-page/renderers/table.mjs.map +1 -0
  155. package/dist/web-page/renderers/terminal.cjs +30 -0
  156. package/dist/web-page/renderers/terminal.mjs +30 -0
  157. package/dist/web-page/renderers/terminal.mjs.map +1 -0
  158. package/dist/web-page/renderers/text.cjs +109 -0
  159. package/dist/web-page/renderers/text.mjs +109 -0
  160. package/dist/web-page/renderers/text.mjs.map +1 -0
  161. package/dist/web-page/renderers/ticker.cjs +133 -0
  162. package/dist/web-page/renderers/ticker.mjs +133 -0
  163. package/dist/web-page/renderers/ticker.mjs.map +1 -0
  164. package/dist/web-page/renderers/time.cjs +69 -0
  165. package/dist/web-page/renderers/time.mjs +69 -0
  166. package/dist/web-page/renderers/time.mjs.map +1 -0
  167. package/dist/web-page/renderers/unknown.cjs +20 -0
  168. package/dist/web-page/renderers/unknown.mjs +20 -0
  169. package/dist/web-page/renderers/unknown.mjs.map +1 -0
  170. package/dist/web-page/renderers/view.cjs +161 -0
  171. package/dist/web-page/renderers/view.mjs +161 -0
  172. package/dist/web-page/renderers/view.mjs.map +1 -0
  173. package/dist/web-page/renderers/wm.cjs +669 -0
  174. package/dist/web-page/renderers/wm.mjs +669 -0
  175. package/dist/web-page/renderers/wm.mjs.map +1 -0
  176. package/dist/web-page/skeleton.cjs +103 -0
  177. package/dist/web-page/skeleton.mjs +103 -0
  178. package/dist/web-page/skeleton.mjs.map +1 -0
  179. package/dist/web-page.cjs +114 -0
  180. package/dist/web-page.d.cts +19 -0
  181. package/dist/web-page.d.cts.map +1 -0
  182. package/dist/web-page.d.mts +19 -0
  183. package/dist/web-page.d.mts.map +1 -0
  184. package/dist/web-page.mjs +115 -0
  185. package/dist/web-page.mjs.map +1 -0
  186. package/dist/web.cjs +827 -0
  187. package/dist/web.d.cts +144 -0
  188. package/dist/web.d.cts.map +1 -0
  189. package/dist/web.d.mts +144 -0
  190. package/dist/web.d.mts.map +1 -0
  191. package/dist/web.mjs +828 -0
  192. package/dist/web.mjs.map +1 -0
  193. package/dist/wm-state.cjs +172 -0
  194. package/dist/wm-state.mjs +171 -0
  195. package/dist/wm-state.mjs.map +1 -0
  196. package/package.json +59 -0
package/dist/web-page/css.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"css.mjs","names":[],"sources":["../../src/web-page/css.ts"],"sourcesContent":["/**\n * AUP CSS — Design Invariants\n *\n * 1. EXPLICIT WINS: Global layout defaults MUST NOT override elements with\n * explicit sizing attributes (data-width, data-height, inline flex).\n * Pattern: use :not([data-width]) to exclude explicitly sized elements.\n *\n * 2. LAYOUT vs SIZING are orthogonal:\n * - layout (row/column/grid) controls spatial arrangement\n * - size props (width/flex/maxWidth) control element dimensions\n * When both are present, size props win.\n *\n * 3. FULL-PAGE mode: Root view becomes full-width (max-width:none).\n * Children get max-width:1200px + margin:auto for centering.\n * Panel-mode children get calculated padding for alignment.\n */\nexport const CSS = `\n /* ── Reset ── */\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n /* ══════════════════════════════════════════════════\n Design Token System — Style Manager\n Two axes: style (structure) + mode (light/dark)\n JS sets data-theme + data-mode on <html>\n ══════════════════════════════════════════════════ */\n\n /* ── Shared layout tokens ── */\n :root {\n --msg-gap: 0.8rem;\n --msg-padding: 0.7rem 1rem;\n --msg-max-width: 75%;\n --input-padding: 0.8rem 1.5rem;\n }\n\n /* ═══ Style: Midnight ═══ terminal/hacker ═══ */\n :root, [data-theme=\"midnight\"] {\n --font: \"Manrope\", -apple-system, \"Segoe UI\", sans-serif;\n --font-heading: \"Playfair Display\", Georgia, serif;\n --font-display: \"Playfair Display\", Georgia, serif;\n --heading-weight: 700;\n --heading-spacing: -0.02em;\n --heading-transform: none;\n --msg-font-size: 0.85rem;\n --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;\n --card-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2), 0 0 0 1px rgba(230,180,80,0.03);\n --card-shadow-hover: 0 12px 28px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.3), 0 0 20px rgba(230,180,80,0.06);\n --card-border: 1px solid var(--border);\n --card-bg: var(--surface);\n --card-backdrop: none;\n --transition: 0.15s;\n --glow: none;\n --atmosphere: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(230,180,80,0.08) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 20%, rgba(89,194,255,0.04) 0%, transparent 50%);\n --accent-secondary: #59c2ff;\n --heading-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);\n /* dark (default) */\n --bg: #0a0e14; --surface: #131820; --border: #1d2433;\n --text: #b3b1ad; --dim: #626a73;\n --accent: #e6b450; --accent-bg: #2a2000;\n --assistant-color: #59c2ff; --assistant-bg: #0d1a2d;\n --success: #91b362; --error: #f07178;\n }\n [data-theme=\"midnight\"][data-mode=\"light\"] {\n --bg: #f5f3ef; --surface: #fefdfb; --border: #e0dcd4;\n --text: #2c2418; --dim: #8a7e6e;\n --accent: #b8860b; --accent-bg: #fef7e5;\n --assistant-color: #1a6dbd; --assistant-bg: #eaf2fc;\n --success: #4d8a30; --error: #c53030;\n --card-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);\n --card-shadow-hover: 0 12px 28px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.06);\n --atmosphere: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(184,134,11,0.06) 0%, transparent 70%);\n }\n\n /* ═══ Style: Clean ═══ modern corporate ═══ */\n [data-theme=\"clean\"] {\n --font: \"DM Sans\", -apple-system, \"Segoe UI\", sans-serif;\n --font-heading: \"Plus Jakarta Sans\", -apple-system, sans-serif;\n --font-display: \"Plus Jakarta Sans\", -apple-system, sans-serif;\n --heading-weight: 800;\n --heading-spacing: -0.025em;\n --heading-transform: none;\n --msg-font-size: 0.9rem;\n --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px;\n --card-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15);\n --card-shadow-hover: 0 16px 32px rgba(0,0,0,0.25), 0 6px 12px rgba(0,0,0,0.15);\n --card-border: 1px solid var(--border);\n --card-bg: var(--surface);\n --card-backdrop: none;\n --transition: 0.2s;\n --glow: none;\n --atmosphere: radial-gradient(ellipse 60% 40% at 30% 0%, rgba(96,165,250,0.08) 0%, transparent 60%), radial-gradient(ellipse 30% 30% at 70% 80%, rgba(74,222,128,0.04) 0%, transparent 40%);\n --accent-secondary: #4ade80;\n --heading-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);\n /* dark */\n --bg: #1a1d24; --surface: #242830; --border: #353942;\n --text: #e2e4e9; --dim: #8890a0;\n --accent: #60a5fa; --accent-bg: #1a2e4a;\n --assistant-color: #93bbfc; --assistant-bg: #1a2540;\n --success: #4ade80; --error: #f87171;\n }\n [data-theme=\"clean\"][data-mode=\"light\"] {\n --bg: #f0f2f5; --surface: #ffffff; --border: #e0e4ea;\n --text: #1a1d23; --dim: #6b7280;\n --accent: #2563eb; --accent-bg: #eff6ff;\n --assistant-color: #1d4ed8; --assistant-bg: #e7f0fd;\n --success: #16a34a; --error: #dc2626;\n --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);\n --card-shadow-hover: 0 16px 32px rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.06);\n --atmosphere: linear-gradient(180deg, rgba(37,99,235,0.04) 0%, transparent 40%), radial-gradient(ellipse 40% 30% at 80% 80%, rgba(22,163,74,0.03) 0%, transparent 40%);\n }\n\n /* ═══ Style: Glass ═══ glassmorphism, frosted ═══ */\n [data-theme=\"glass\"] {\n --font: \"Sora\", -apple-system, \"Segoe UI\", sans-serif;\n --font-heading: \"Fraunces\", Georgia, serif;\n --font-display: \"Fraunces\", Georgia, serif;\n --heading-weight: 700;\n --heading-spacing: -0.01em;\n --heading-transform: none;\n --msg-font-size: 0.88rem;\n --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;\n --card-backdrop: blur(20px) saturate(1.5);\n --transition: 0.3s;\n --glow: none;\n --atmosphere: radial-gradient(ellipse 50% 60% at 20% 0%, rgba(167,139,250,0.12) 0%, transparent 50%), radial-gradient(ellipse 40% 40% at 80% 20%, rgba(244,114,182,0.08) 0%, transparent 50%), radial-gradient(ellipse 30% 30% at 50% 60%, rgba(52,211,153,0.05) 0%, transparent 40%);\n --accent-secondary: #f472b6;\n --heading-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);\n /* dark */\n --bg: #0f0720; --surface: rgba(255,255,255,0.08); --border: rgba(255,255,255,0.1);\n --text: #e0dce8; --dim: #8a80a0;\n --accent: #a78bfa; --accent-bg: rgba(167,139,250,0.12);\n --assistant-color: #c4b5fd; --assistant-bg: rgba(167,139,250,0.08);\n --success: #34d399; --error: #fb7185;\n --card-shadow: 0 8px 32px rgba(0,0,0,0.2);\n --card-shadow-hover: 0 16px 48px rgba(0,0,0,0.35), 0 0 20px rgba(167,139,250,0.1);\n --card-border: 1px solid rgba(255,255,255,0.12);\n --card-bg: rgba(255,255,255,0.06);\n }\n [data-theme=\"glass\"][data-mode=\"light\"] {\n --bg: #ece4f5; --surface: rgba(255,255,255,0.65); --border: rgba(120,60,200,0.12);\n --text: #2a1a45; --dim: #7a6a95;\n --accent: #7c3aed; --accent-bg: rgba(124,58,237,0.08);\n --assistant-color: #6d28d9; --assistant-bg: rgba(124,58,237,0.06);\n --success: #059669; --error: #e11d48;\n --card-shadow: 0 8px 32px rgba(100,50,180,0.1);\n --card-shadow-hover: 0 16px 48px rgba(100,50,180,0.15), 0 0 16px rgba(124,58,237,0.06);\n --card-border: 1px solid rgba(120,60,200,0.1);\n --card-bg: rgba(255,255,255,0.5);\n --atmosphere: radial-gradient(ellipse 50% 60% at 20% 0%, rgba(124,58,237,0.06) 0%, transparent 50%), radial-gradient(ellipse 40% 40% at 80% 20%, rgba(219,39,119,0.04) 0%, transparent 50%);\n }\n\n /* ═══ Style: Brutalist ═══ raw anti-design ═══ */\n [data-theme=\"brutalist\"] {\n --font: \"Courier New\", \"Courier\", monospace;\n --font-heading: Georgia, \"Times New Roman\", serif;\n --heading-weight: 900;\n --heading-spacing: 0.02em;\n --heading-transform: uppercase;\n --msg-font-size: 0.9rem;\n --radius-sm: 0; --radius-md: 0; --radius-lg: 0;\n --card-shadow: 4px 4px 0 var(--text);\n --card-shadow-hover: 6px 6px 0 var(--text);\n --card-border: 3px solid var(--text);\n --card-bg: var(--surface);\n --card-backdrop: none;\n --transition: 0s;\n --glow: none;\n --atmosphere: none;\n --accent-secondary: #ff6600;\n --heading-gradient: none;\n /* light (natural) */\n --bg: #fffff0; --surface: #ffffff; --border: #000000;\n --text: #000000; --dim: #555555;\n --accent: #ff0000; --accent-bg: #ffff00;\n --assistant-color: #0000ff; --assistant-bg: #e0e0ff;\n --success: #008000; --error: #ff0000;\n }\n [data-theme=\"brutalist\"][data-mode=\"dark\"] {\n --bg: #111111; --surface: #1a1a1a; --border: #ffffff;\n --text: #ffffff; --dim: #999999;\n --accent: #ff3333; --accent-bg: #331111;\n --assistant-color: #6666ff; --assistant-bg: #1a1a33;\n --success: #33cc33; --error: #ff3333;\n }\n\n /* ═══ Style: Soft ═══ neumorphism, embossed ═══ */\n [data-theme=\"soft\"] {\n --font: \"Outfit\", -apple-system, \"Segoe UI\", sans-serif;\n --font-heading: \"Crimson Pro\", Georgia, serif;\n --font-display: \"Crimson Pro\", Georgia, serif;\n --heading-weight: 700;\n --heading-spacing: -0.01em;\n --heading-transform: none;\n --msg-font-size: 0.9rem;\n --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px;\n --card-border: none;\n --card-bg: var(--surface);\n --card-backdrop: none;\n --transition: 0.25s;\n --glow: none;\n --atmosphere: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(99,102,241,0.04) 0%, transparent 60%);\n --accent-secondary: #818cf8;\n --heading-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);\n /* light (natural) */\n --bg: #e8e8e8; --surface: #e8e8e8; --border: #d0d0d0;\n --text: #444444; --dim: #888888;\n --accent: #6366f1; --accent-bg: #e0e0f8;\n --assistant-color: #4f46e5; --assistant-bg: #ebebf8;\n --success: #059669; --error: #e11d48;\n --card-shadow: 6px 6px 14px #c5c5c5, -6px -6px 14px #ffffff;\n --card-shadow-hover: 8px 8px 18px #b8b8b8, -8px -8px 18px #ffffff;\n }\n [data-theme=\"soft\"][data-mode=\"dark\"] {\n --bg: #2c2c34; --surface: #2c2c34; --border: #3a3a44;\n --text: #d0d0d8; --dim: #7a7a88;\n --accent: #818cf8; --accent-bg: #2a2a48;\n --assistant-color: #a5b4fc; --assistant-bg: #2a2a40;\n --success: #34d399; --error: #fb7185;\n --card-shadow: 6px 6px 14px #1c1c24, -6px -6px 14px #3c3c44;\n --card-shadow-hover: 8px 8px 18px #161620, -8px -8px 18px #424250;\n --atmosphere: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(99,102,241,0.06) 0%, transparent 60%);\n }\n\n /* ═══ Style: Cyber ═══ neon retro-futurism ═══ */\n [data-theme=\"cyber\"] {\n --font: \"Share Tech Mono\", \"Fira Code\", monospace;\n --font-heading: var(--font);\n --heading-weight: 400;\n --heading-spacing: 0.08em;\n --heading-transform: uppercase;\n --msg-font-size: 0.85rem;\n --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px;\n --card-backdrop: none;\n --transition: 0.15s;\n --glow: 0 0 8px var(--accent), 0 0 20px rgba(0,255,255,0.1);\n --atmosphere: radial-gradient(ellipse 40% 30% at 50% 0%, rgba(0,255,255,0.06) 0%, transparent 50%), radial-gradient(ellipse 30% 30% at 80% 70%, rgba(255,0,255,0.04) 0%, transparent 50%);\n --accent-secondary: #ff00ff;\n --heading-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);\n /* dark (default) */\n --bg: #030810; --surface: #06101c; --border: rgba(0,255,255,0.2);\n --text: #b0e0e6; --dim: #3a6a70;\n --accent: #00ffff; --accent-bg: #001a1a;\n --assistant-color: #ff00ff; --assistant-bg: #1a001a;\n --success: #00ff41; --error: #ff2040;\n --card-shadow: 0 0 12px rgba(0,255,255,0.15), inset 0 0 12px rgba(0,255,255,0.03);\n --card-shadow-hover: 0 0 24px rgba(0,255,255,0.25), 0 0 48px rgba(0,255,255,0.08), inset 0 0 16px rgba(0,255,255,0.05);\n --card-border: 1px solid rgba(0,255,255,0.3);\n --card-bg: rgba(0,10,20,0.8);\n }\n [data-theme=\"cyber\"][data-mode=\"light\"] {\n --bg: #f0fafa; --surface: #ffffff; --border: rgba(0,160,160,0.25);\n --text: #0a2828; --dim: #4a7070;\n --accent: #0891b2; --accent-bg: #ecfeff;\n --assistant-color: #a21caf; --assistant-bg: #fdf4ff;\n --success: #059669; --error: #e11d48;\n --card-shadow: 0 0 12px rgba(0,180,180,0.1), inset 0 0 8px rgba(0,180,180,0.02);\n --card-shadow-hover: 0 0 20px rgba(0,180,180,0.15), 0 0 40px rgba(0,180,180,0.06), inset 0 0 12px rgba(0,180,180,0.03);\n --card-border: 1px solid rgba(0,160,160,0.2);\n --card-bg: rgba(240,250,250,0.8);\n --glow: 0 0 6px rgba(8,145,178,0.3);\n --atmosphere: radial-gradient(ellipse 40% 30% at 50% 0%, rgba(8,145,178,0.05) 0%, transparent 50%);\n }\n\n /* ═══ Style: Editorial ═══ luxury tech magazine ═══ */\n [data-theme=\"editorial\"] {\n --font: \"Sora\", \"Noto Sans SC\", -apple-system, sans-serif;\n --font-heading: \"DM Serif Display\", Georgia, serif;\n --font-display: \"DM Serif Display\", Georgia, serif;\n --heading-weight: 400;\n --heading-spacing: -0.02em;\n --heading-transform: none;\n --msg-font-size: 0.88rem;\n --radius-sm: 8px; --radius-md: 12px; --radius-lg: 2rem;\n --card-shadow: 0 2px 8px rgba(0,0,0,0.2);\n --card-shadow-hover: 0 16px 40px rgba(0,0,0,0.35), 0 0 20px rgba(196,240,77,0.08);\n --card-border: 1px solid var(--border);\n --card-bg: var(--surface);\n --card-backdrop: blur(20px);\n --transition: 0.3s;\n --glow: none;\n --atmosphere: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(196,240,77,0.08) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 80% 30%, rgba(196,240,77,0.04) 0%, transparent 50%);\n --accent-secondary: #e879f9;\n --heading-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);\n /* dark (default) */\n --bg: #0a0a0f; --surface: #1a1a25; --border: rgba(255,255,255,0.06);\n --text: #e8e6f0; --dim: #8b89a0;\n --accent: #c4f04d; --accent-bg: rgba(196,240,77,0.12);\n --assistant-color: #c4f04d; --assistant-bg: rgba(196,240,77,0.08);\n --success: #91b362; --error: #f07178;\n }\n [data-theme=\"editorial\"][data-mode=\"light\"] {\n --bg: #fafaf8; --surface: #ffffff; --border: rgba(0,0,0,0.08);\n --text: #1a1a1f; --dim: #6b6b78;\n --accent: #2a6e00; --accent-bg: rgba(42,110,0,0.08);\n --assistant-color: #2a6e00; --assistant-bg: rgba(42,110,0,0.06);\n --success: #2a6e00; --error: #c53030;\n --card-shadow: 0 2px 8px rgba(0,0,0,0.06);\n --card-shadow-hover: 0 12px 32px rgba(0,0,0,0.1), 0 0 12px rgba(42,110,0,0.04);\n --atmosphere: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(42,110,0,0.03) 0%, transparent 60%);\n }\n\n /* ═══ Style: Brutalist Mono ═══ terminal-inspired raw ═══ */\n [data-theme=\"brutalist-mono\"] {\n --font: \"Space Mono\", \"Noto Sans SC\", monospace;\n --font-heading: \"Instrument Serif\", Georgia, serif;\n --heading-weight: 400;\n --heading-spacing: -0.03em;\n --heading-transform: none;\n --msg-font-size: 0.85rem;\n --radius-sm: 0; --radius-md: 0; --radius-lg: 0;\n --card-shadow: none;\n --card-shadow-hover: none;\n --card-border: 1px solid var(--border);\n --card-bg: var(--surface);\n --card-backdrop: none;\n --transition: 0s;\n --glow: none;\n --atmosphere: none;\n --accent-secondary: #88ff00;\n --heading-gradient: none;\n /* dark (default) */\n --bg: #000000; --surface: #111111; --border: #222222;\n --text: #ffffff; --dim: #888888;\n --accent: #00ff88; --accent-bg: rgba(0,255,136,0.08);\n --assistant-color: #00ff88; --assistant-bg: rgba(0,255,136,0.06);\n --success: #00ff88; --error: #ff3344;\n }\n [data-theme=\"brutalist-mono\"][data-mode=\"light\"] {\n --bg: #f0ede6; --surface: #ffffff; --border: #dddddd;\n --text: #000000; --dim: #666666;\n --accent: #006633; --accent-bg: rgba(0,102,51,0.06);\n --assistant-color: #006633; --assistant-bg: rgba(0,102,51,0.05);\n --success: #006633; --error: #cc0022;\n --card-shadow: none;\n --card-shadow-hover: none;\n }\n\n /* ── Layout ── */\n html, body { height: 100%; }\n body { font-family: var(--font); background: var(--bg); color: var(--text); display: flex; flex-direction: column; transition: background var(--transition), color var(--transition); position: relative; }\n body::before { content: \"\"; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: -1; opacity: 0.7; background: var(--atmosphere, none); }\n body::after { content: \"\"; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: -1; opacity: 0.015; background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\"); background-repeat: repeat; background-size: 256px 256px; mix-blend-mode: overlay; }\n [data-theme=\"brutalist\"] body::after, [data-theme=\"brutalist-mono\"] body::after { opacity: 0; }\n\n /* Background grid texture — subtle structural depth for dark themes */\n html:not([data-mode=\"light\"]):not([data-theme=\"brutalist\"]):not([data-theme=\"brutalist-mono\"]) body { background-color: var(--bg); background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: auto, 60px 60px, 60px 60px; }\n\n /* Editorial: light body weight, generous line-height, pill buttons */\n [data-theme=\"editorial\"] body { font-weight: 300; line-height: 1.7; }\n [data-theme=\"editorial\"] .aup-action { border-radius: 2rem; }\n [data-theme=\"editorial\"] .aup-text[data-scale=\"code\"] { font-family: \"Courier New\", monospace; }\n\n /* Brutalist Mono: crosshair cursor, accent-border code, uppercase labels */\n [data-theme=\"brutalist-mono\"] body { cursor: crosshair; line-height: 1.6; }\n [data-theme=\"brutalist-mono\"] .aup-action { cursor: crosshair; }\n [data-theme=\"brutalist-mono\"] .aup-text[data-scale=\"code\"] { border-left: 3px solid var(--accent); border-radius: 0; font-family: \"Space Mono\", monospace; }\n [data-theme=\"brutalist-mono\"] .aup-text[data-mode=\"badge\"] { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 0; }\n [data-theme=\"brutalist-mono\"] .aup-text[data-intent=\"danger\"] { border-left: 3px solid var(--error); background: color-mix(in srgb, var(--error) 8%, var(--bg)); }\n\n header { padding: 0.6rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.8rem; background: var(--surface); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }\n header h1 { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--accent); letter-spacing: var(--heading-spacing); }\n header .status { font-size: 0.75rem; color: var(--dim); }\n header .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }\n header .dot.on { background: var(--success); box-shadow: 0 0 6px var(--success); }\n header .dot.off { background: var(--error); }\n\n #messages { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: var(--msg-gap); }\n\n /* ── Message bubbles ── */\n .msg { max-width: var(--msg-max-width); padding: var(--msg-padding); border-radius: var(--radius-lg); font-size: var(--msg-font-size); line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word; position: relative; transition: background var(--transition), color var(--transition); }\n .msg.user { align-self: flex-end; background: var(--accent-bg); color: var(--accent); border-bottom-right-radius: var(--radius-sm); white-space: pre-wrap; }\n .msg.assistant { align-self: flex-start; background: var(--assistant-bg); color: var(--assistant-color); border-bottom-left-radius: var(--radius-sm); }\n .msg.system { align-self: center; color: var(--dim); font-size: 0.78rem; }\n .msg.error { align-self: center; background: #2a0000; color: var(--error); font-size: 0.78rem; white-space: pre-wrap; }\n .msg.notify { align-self: flex-start; background: #0d2a0d; color: var(--success); font-size: 0.82rem; white-space: pre-wrap; border-radius: var(--radius-md); }\n\n /* ── Copy button ── */\n .msg .copy-btn { position: absolute; top: 6px; right: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--dim); width: 26px; height: 26px; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); font-size: 14px; line-height: 1; padding: 0; }\n .msg:hover .copy-btn { opacity: 1; }\n .msg .copy-btn:hover { border-color: var(--accent); color: var(--accent); }\n .msg .copy-btn.copied { border-color: var(--success); color: var(--success); }\n\n /* ── Markdown inside assistant bubbles ── */\n .msg.assistant p { margin: 0.4em 0; }\n .msg.assistant p:first-child { margin-top: 0; }\n .msg.assistant p:last-child { margin-bottom: 0; }\n .msg.assistant h1, .msg.assistant h2, .msg.assistant h3,\n .msg.assistant h4, .msg.assistant h5, .msg.assistant h6 { color: var(--text); margin: 0.8em 0 0.3em; font-size: 0.95em; }\n .msg.assistant h1 { font-size: 1.1em; }\n .msg.assistant h2 { font-size: 1.0em; }\n .msg.assistant strong { color: var(--text); }\n .msg.assistant em { color: var(--dim); }\n .msg.assistant a { color: var(--accent); text-decoration: underline; }\n .msg.assistant code { background: var(--bg); color: var(--accent); padding: 1px 5px; border-radius: var(--radius-sm); font-family: \"JetBrains Mono\", \"Fira Code\", monospace; font-size: 0.82em; }\n .msg.assistant pre { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.7em 0.9em; margin: 0.5em 0; overflow-x: auto; font-size: 0.82em; line-height: 1.5; }\n .msg.assistant pre code { background: none; padding: 0; color: var(--text); font-size: inherit; }\n .msg.assistant pre code.hljs { background: transparent; padding: 0; }\n .msg.assistant ul, .msg.assistant ol { margin: 0.4em 0; padding-left: 1.5em; }\n .msg.assistant li { margin: 0.2em 0; }\n .msg.assistant blockquote { border-left: 3px solid var(--border); padding-left: 0.8em; color: var(--dim); margin: 0.5em 0; }\n .msg.assistant table { border-collapse: collapse; margin: 0.5em 0; font-size: 0.82em; width: 100%; }\n .msg.assistant th, .msg.assistant td { border: 1px solid var(--border); padding: 0.3em 0.6em; text-align: left; }\n .msg.assistant th { background: var(--surface); color: var(--text); }\n .msg.assistant hr { border: none; border-top: 1px solid var(--border); margin: 0.6em 0; }\n .msg.assistant img { max-width: 100%; border-radius: var(--radius-sm); }\n\n /* ── Component: table ── */\n .component-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0.3em 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }\n .component-table th, .component-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }\n .component-table th { background: var(--surface); color: var(--text); border-bottom: 2px solid var(--border); }\n .component-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 50%, transparent); }\n .component-table tbody tr:hover td { background: var(--accent-bg); }\n .component-table tbody tr:last-child td { border-bottom: none; }\n .component-image { max-width: 100%; border-radius: var(--radius-md); }\n\n /* ── Prompt area ── */\n #prompt-area { display: none; padding: 12px 1.5rem; background: var(--surface); border-top: 1px solid var(--border); }\n #prompt-area .prompt-msg { margin-bottom: 8px; font-weight: bold; color: var(--accent); }\n #prompt-area .prompt-options { display: flex; flex-direction: column; gap: 4px; }\n #prompt-area .prompt-options button { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 6px 12px; border-radius: var(--radius-md); cursor: pointer; text-align: left; font-family: var(--font); font-size: var(--msg-font-size); transition: all var(--transition); }\n #prompt-area .prompt-options button:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }\n\n /* ── Input bar ── */\n #input-bar { padding: var(--input-padding); border-top: 1px solid var(--border); display: flex; gap: 0.5rem; }\n #input-bar textarea { flex: 1; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 0.6rem 0.8rem; border-radius: var(--radius-md); font-family: var(--font); font-size: var(--msg-font-size); resize: none; outline: none; min-height: 40px; max-height: 120px; transition: border-color var(--transition); }\n #input-bar textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }\n #input-bar button { background: var(--accent); border: 1px solid var(--accent); color: var(--bg); padding: 0 1.2rem; border-radius: var(--radius-md); font-family: var(--font); font-size: var(--msg-font-size); font-weight: 600; cursor: pointer; transition: all var(--transition); }\n #input-bar button:hover { filter: brightness(1.15); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }\n #input-bar button:disabled { opacity: 0.4; cursor: default; }\n\n /* ── Page view ── */\n #page-view { display: none; flex: 1; overflow-y: auto; flex-direction: column; }\n #page-view .page-toolbar { padding: 6px 16px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }\n #page-view .page-toolbar button { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85em; transition: all var(--transition); }\n #page-view .page-toolbar button:hover { border-color: var(--accent); color: var(--accent); }\n #page-view .page-toolbar span { font-size: 0.85em; color: var(--dim); }\n #page-content { flex: 1; padding: 16px; overflow-y: auto; color: var(--text); }\n\n /* ── Layout page grid ── */\n .layout-page { display: grid; grid-template-areas: \"header header\" \"sidebar main\" \"footer footer\"; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; min-height: 100%; gap: 1px; background: var(--border); }\n .layout-header { grid-area: header; background: var(--surface); padding: 12px 16px; }\n .layout-sidebar { grid-area: sidebar; background: var(--bg); padding: 12px 16px; }\n .layout-main { grid-area: main; background: var(--bg); padding: 16px; }\n .layout-footer { grid-area: footer; background: var(--surface); padding: 8px 16px; font-size: 0.85em; color: var(--dim); }\n\n /* ── Desktop Splash ── */\n @keyframes splash-breathe { 0%, 100% { opacity: 0.18; transform: scale(1); } 50% { opacity: 0.35; transform: scale(1.04); } }\n @keyframes splash-orbit-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }\n @keyframes splash-glyph-breathe { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.5; } }\n @keyframes splash-core-pulse { 0%, 100% { opacity: 0.3; r: 6; } 50% { opacity: 0.6; r: 7; } }\n @keyframes splash-ray-flow { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.3; } }\n #desktop-splash {\n flex: 1; display: flex; align-items: center; justify-content: center;\n background: var(--bg);\n position: relative; overflow: hidden;\n transition: opacity 0.6s ease-out;\n }\n #desktop-splash::before {\n content: \"\"; position: absolute; inset: 0;\n background:\n radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 70%);\n pointer-events: none;\n animation: splash-breathe 6s ease-in-out infinite;\n }\n #desktop-splash.hidden { opacity: 0; pointer-events: none; position: absolute; }\n .splash-orbit {\n position: absolute; top: 50%; left: 50%;\n border: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);\n border-radius: 50%; pointer-events: none;\n }\n .splash-orbit-1 { width: 240px; height: 240px; animation: splash-orbit-spin 40s linear infinite; }\n .splash-orbit-2 { width: 360px; height: 360px; animation: splash-orbit-spin 60s linear infinite reverse; border-style: dashed; border-color: color-mix(in srgb, var(--dim) 6%, transparent); }\n .splash-orbit-3 { width: 500px; height: 500px; animation: splash-orbit-spin 90s linear infinite; border-color: color-mix(in srgb, var(--dim) 3%, transparent); }\n .splash-content { text-align: center; user-select: none; position: relative; z-index: 1; }\n .splash-glyph { width: 80px; height: 80px; margin: 0 auto 24px; color: var(--dim); }\n .splash-glyph svg { width: 100%; height: 100%; }\n .splash-glyph .glyph-outer { opacity: 0.15; animation: splash-glyph-breathe 5s ease-in-out infinite; }\n .splash-glyph .glyph-inner { opacity: 0.2; animation: splash-glyph-breathe 5s ease-in-out infinite 1.5s; }\n .splash-glyph .glyph-core { opacity: 0.35; animation: splash-core-pulse 4s ease-in-out infinite; }\n .splash-glyph .glyph-ray { opacity: 0.12; animation: splash-ray-flow 4s ease-in-out infinite; }\n .splash-glyph .glyph-ray:nth-child(5) { animation-delay: 0.4s; }\n .splash-glyph .glyph-ray:nth-child(6) { animation-delay: 0.8s; }\n .splash-glyph .glyph-ray:nth-child(7) { animation-delay: 1.2s; }\n .splash-glyph .glyph-ray:nth-child(8) { animation-delay: 1.6s; }\n .splash-glyph .glyph-ray:nth-child(9) { animation-delay: 2.0s; }\n .splash-glyph .glyph-ray:nth-child(10) { animation-delay: 2.4s; }\n .splash-wordmark {\n font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800;\n letter-spacing: 0.15em; color: var(--dim); opacity: 0.2;\n text-transform: uppercase;\n animation: splash-breathe 6s ease-in-out infinite 0.5s;\n }\n .splash-sub {\n font-family: var(--font); font-size: 0.7rem; font-weight: 400;\n letter-spacing: 0.3em; text-transform: uppercase;\n color: var(--dim); opacity: 0.15; margin-top: 4px;\n }\n .splash-status {\n margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 6px;\n font-family: var(--font); font-size: 0.65rem; letter-spacing: 0.08em;\n text-transform: uppercase; color: var(--dim); opacity: 0.3;\n }\n\n /* ── Session Badge ── */\n #session-badge {\n position: fixed; bottom: 8px; left: 10px; z-index: 9999;\n display: flex; align-items: center; gap: 5px;\n font-family: var(--font-mono, \"JetBrains Mono\", \"Share Tech Mono\", monospace);\n font-size: 0.6rem; letter-spacing: 0.04em;\n color: var(--dim); opacity: 0.25;\n user-select: all; pointer-events: auto;\n transition: opacity 0.3s;\n }\n #session-badge:hover { opacity: 0.6; }\n #session-badge:hover #session-dot.connected { background: rgba(80,200,120,0.8); }\n #session-badge:hover #session-dot.disconnected { background: rgba(220,80,80,0.7); }\n #session-badge:hover #session-dot.connecting { background: rgba(200,180,80,0.7); }\n #session-id:empty { display: none; }\n #session-dot {\n width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;\n background: rgba(100,100,100,0.4); transition: background 0.3s;\n }\n #session-dot.connected { background: rgba(80,200,120,0.35); }\n #session-dot.disconnected { background: rgba(220,80,80,0.35); }\n #session-dot.connecting { background: rgba(200,180,80,0.35); animation: session-dot-blink 1.2s ease-in-out infinite; }\n @keyframes session-dot-blink { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }\n\n /* ── AUP Display ── */\n #aup-display { display: none; flex: 1; overflow-y: auto; padding: 20px 24px; }\n #aup-display.active { display: flex; flex-direction: column; }\n #aup-display.full-page { padding: 0; overflow: hidden; }\n #aup-display.full-page .aup-toolbar { display: none; }\n #aup-display.full-page #aup-root { max-width: none; padding: 0; margin: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }\n #aup-display.full-page #aup-root > .aup-view { flex: 1; max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; background: none !important; border: none !important; box-shadow: none !important; overflow-y: auto; }\n #aup-display.full-page #aup-root > .aup-view[data-layout=\"overlay-grid\"] { padding: var(--overlay-pad) !important; }\n /* Full-page centering: non-panel, non-shell children get max-width + auto margin */\n #aup-display.full-page #aup-root > .aup-view > *:not([data-mode=\"panel\"]):not([data-mode=\"shell\"]):not(.wm-container) { max-width: 1200px; width: 100%; margin-left: auto !important; margin-right: auto !important; padding-left: 40px; padding-right: 40px; box-sizing: border-box; }\n /* Nav bar and footer panels bleed full width but pad their content */\n #aup-display.full-page #aup-root > .aup-view > .aup-view:first-child[data-mode=\"panel\"] { padding-left: max(16px, calc((100% - 1200px) / 2 + 40px)); padding-right: max(16px, calc((100% - 1200px) / 2 + 40px)); }\n #aup-display.full-page #aup-root > .aup-view > .aup-view[data-mode=\"panel\"]:last-child { padding-left: max(16px, calc((100% - 1200px) / 2 + 40px)); padding-right: max(16px, calc((100% - 1200px) / 2 + 40px)); }\n #aup-display.full-page .aup-deck-host { width: 100%; height: 100%; }\n .aup-toolbar { padding: 6px 16px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }\n .aup-toolbar button { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85em; transition: all var(--transition); }\n .aup-toolbar button:hover { border-color: var(--accent); color: var(--accent); }\n #aup-root { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; }\n\n /* ── AUP Primitives ── */\n .aup-view { display: flex; flex-direction: column; gap: 12px; }\n .aup-view[data-layout=\"row\"] { flex-direction: row; }\n .aup-view[data-layout=\"row\"] > .aup-view:not([data-width]) { flex: 1; min-width: 0; }\n .aup-view[data-layout=\"grid\"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }\n .aup-view[data-layout=\"stack\"] { display: grid; width: 100%; height: 100%; }\n .aup-view[data-layout=\"stack\"] > * { grid-area: 1 / 1; }\n .aup-view[data-layout=\"stack\"] > *:first-child { z-index: 0; }\n .aup-view[data-layout=\"stack\"] > *:nth-child(2) { z-index: 1; }\n .aup-view[data-layout=\"stack\"] > *:nth-child(n+3) { z-index: 2; }\n\n .aup-view[data-layout=\"overlay-grid\"] { --overlay-pad: 5vw; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto auto auto; grid-template-areas: \"top-start top-center top-end\" \"mid-start mid-center mid-end\" \"lower-start lower-center lower-end\" \"ticker ticker ticker\" \"bottom-start bottom-center bottom-end\"; width: 100%; height: 100%; padding: var(--overlay-pad); pointer-events: none; gap: 8px; }\n .aup-view[data-layout=\"overlay-grid\"] > * { pointer-events: auto; }\n .aup-view[data-layout=\"overlay-grid\"] > .aup-text,\n .aup-view[data-layout=\"overlay-grid\"] > .aup-action,\n .aup-view[data-layout=\"overlay-grid\"] > .aup-time { width: fit-content; height: fit-content; }\n .aup-view[data-layout=\"overlay-grid\"] > .aup-map { min-width: 240px; max-width: 320px; aspect-ratio: 1; }\n .aup-view[data-layout=\"overlay-grid\"] > .aup-table,\n .aup-view[data-layout=\"overlay-grid\"] > .aup-chart,\n .aup-view[data-layout=\"overlay-grid\"] > .aup-finance-chart,\n .aup-view[data-layout=\"overlay-grid\"] > .aup-calendar { min-width: 240px; max-width: 320px; }\n .aup-view[data-layout=\"overlay-grid\"] > .aup-media { width: fit-content; height: fit-content; }\n .aup-view[data-layout=\"overlay-grid\"] > .aup-media img { max-height: 48px; object-fit: contain; width: auto; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"top-start\"] { grid-area: top-start; align-self: start; justify-self: start; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"top-center\"] { grid-area: top-center; align-self: start; justify-self: center; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"top-end\"] { grid-area: top-end; align-self: start; justify-self: end; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"mid-start\"] { grid-area: mid-start; align-self: center; justify-self: start; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"mid-center\"] { grid-area: mid-center; align-self: center; justify-self: center; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"mid-end\"] { grid-area: mid-end; align-self: center; justify-self: end; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"lower-start\"] { grid-area: lower-start; align-self: end; justify-self: start; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"lower-center\"] { grid-area: lower-center; align-self: end; justify-self: center; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"lower-end\"] { grid-area: lower-end; align-self: end; justify-self: end; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"ticker\"] { grid-area: ticker; justify-self: stretch; margin-left: calc(-1 * var(--overlay-pad)); margin-right: calc(-1 * var(--overlay-pad)); }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"bottom-start\"] { grid-area: bottom-start; align-self: end; justify-self: start; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"bottom-center\"] { grid-area: bottom-center; align-self: end; justify-self: center; }\n .aup-view[data-layout=\"overlay-grid\"] > [data-region=\"bottom-end\"] { grid-area: bottom-end; align-self: end; justify-self: end; }\n .aup-view[data-mode=\"card\"] { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--card-shadow); backdrop-filter: var(--card-backdrop); -webkit-backdrop-filter: var(--card-backdrop); transition: box-shadow var(--transition), transform var(--transition), background var(--transition); position: relative; overflow: hidden; }\n .aup-view[data-mode=\"card\"]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--heading-gradient, linear-gradient(90deg, var(--accent), var(--accent-secondary, var(--accent)))); opacity: 0; transition: opacity var(--transition); }\n .aup-view[data-mode=\"card\"]:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover, var(--card-shadow)); }\n .aup-view[data-mode=\"card\"]:hover::before { opacity: 1; }\n :is([data-theme=\"brutalist\"], [data-theme=\"brutalist-mono\"]) .aup-view[data-mode=\"card\"]::before { display: none; }\n .aup-view[data-mode=\"panel\"] { background: var(--card-bg); border-radius: var(--radius-sm); padding: 10px 16px; backdrop-filter: var(--card-backdrop); -webkit-backdrop-filter: var(--card-backdrop); }\n\n /* ── Header: first panel child of root is the nav bar ── */\n #aup-root > .aup-view:first-child[data-mode=\"panel\"] { position: sticky; top: 0; z-index: 20; border-radius: 0; margin: -20px -24px 20px; padding: 10px 24px; width: calc(100% + 48px); max-width: none; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }\n #aup-root > .aup-view:first-child[data-mode=\"panel\"] .aup-action { flex-shrink: 0; }\n\n /* ── Footer: last panel child of root ── */\n #aup-root > .aup-view[data-mode=\"panel\"]:last-child { border-radius: 0; margin: 20px -24px -20px; padding: 16px 24px; width: calc(100% + 48px); max-width: none; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 60%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 0.85em; color: var(--dim); }\n .aup-view[data-mode=\"pane\"] { flex: 1; min-width: 0; overflow-y: auto; border-radius: var(--radius-md); padding: 16px; background: var(--card-bg); backdrop-filter: var(--card-backdrop); -webkit-backdrop-filter: var(--card-backdrop); }\n .aup-view[data-mode=\"pane\"] > .aup-text[data-level=\"2\"]:first-child { background: var(--surface); margin: -16px -16px 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0; position: sticky; top: -16px; z-index: 1; }\n .aup-view[data-mode=\"divider\"] { height: 1px; background: var(--border); flex: none; padding: 0; gap: 0; border-radius: 0; }\n\n /* ── Shell Layout: Desktop App Chrome ── */\n .aup-view[data-mode=\"shell\"] {\n display: grid;\n grid-template-areas:\n \"menubar\"\n \"toolbar\"\n \"body\"\n \"statusbar\"\n \"dock\";\n grid-template-rows: auto auto 1fr auto auto;\n width: 100%; height: 100vh; overflow: hidden; gap: 0;\n background: var(--bg);\n font-family: \"SF Mono\", \"Consolas\", \"JetBrains Mono\", \"Fira Code\", monospace;\n font-size: 13px;\n }\n .aup-view[data-mode=\"shell\"] > [data-role=\"menubar\"] { grid-area: menubar; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 32px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 0.8rem; flex-shrink: 0; overflow: hidden; }\n .aup-view[data-mode=\"shell\"] > [data-role=\"menubar\"] * { margin: 0; font-size: inherit; }\n .aup-view[data-mode=\"shell\"] > [data-role=\"statusbar\"] * { margin: 0; font-size: inherit; }\n .aup-view[data-mode=\"shell\"] > [data-role=\"toolbar\"] { grid-area: toolbar; display: flex; align-items: center; gap: 8px; padding: 4px 12px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }\n .aup-view[data-mode=\"shell\"] > [data-role=\"body\"] { grid-area: body; display: flex; overflow: hidden; min-height: 0; }\n .aup-view[data-mode=\"shell\"] > [data-role=\"statusbar\"] { grid-area: statusbar; display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 24px; background: var(--surface); border-top: 1px solid var(--border); font-size: 0.75rem; color: var(--dim); flex-shrink: 0; }\n .aup-view[data-mode=\"shell\"] > [data-role=\"dock\"] { grid-area: dock; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 12px; background: var(--surface); border-top: 1px solid var(--border); flex-shrink: 0; }\n /* Shell body children */\n [data-role=\"sidebar\"] { width: 220px; overflow-y: auto; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface); padding: 8px 0; }\n [data-role=\"sidebar\"] > .aup-view > .aup-text:first-child { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); padding: 8px 12px 4px; }\n [data-role=\"sidebar\"] .aup-action { display: block; width: 100%; text-align: left; padding: 4px 12px; font-size: 0.8rem; border-radius: 0; background: none; border: none; color: var(--text); cursor: pointer; }\n [data-role=\"sidebar\"] .aup-action:hover { background: var(--hover); }\n [data-role=\"sidebar\"] .aup-action[data-variant=\"primary\"] { background: var(--accent); color: var(--accent-fg, #fff); border-radius: var(--radius-sm); margin: 1px 8px; width: calc(100% - 16px); }\n [data-role=\"content\"] { flex: 1; overflow-y: auto; min-width: 0; padding: 16px; }\n [data-role=\"content\"] > .aup-text[data-level=\"2\"] { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); margin-bottom: 12px; }\n [data-role=\"content\"] > .aup-view[data-layout=\"row\"] { padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 2px; }\n [data-role=\"content\"] > .aup-view[data-layout=\"row\"]:hover { background: var(--hover); }\n [data-role=\"content\"] > .aup-view[data-layout=\"row\"] > .aup-text:first-child { min-width: 120px; font-weight: 500; font-size: 0.85rem; }\n [data-role=\"content\"] > .aup-view[data-layout=\"row\"] > .aup-text:last-child { margin-left: auto; font-weight: 600; }\n [data-role=\"inspector\"] { width: 280px; overflow-y: auto; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface); padding: 8px; }\n [data-role=\"inspector\"] > .aup-text[data-level=\"3\"] { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); padding: 8px 4px 4px; margin-bottom: 0; }\n [data-role=\"inspector\"] > .aup-text[data-variant=\"dim\"] { font-size: 0.8rem; padding: 4px; }\n /* Collapsible panels */\n [data-collapsed=\"true\"] > .aup-view-body { display: none; }\n [data-collapsed=\"true\"][data-role=\"sidebar\"] { width: auto; min-width: 0; padding: 4px; }\n [data-collapsed=\"true\"][data-role=\"inspector\"] { width: auto; min-width: 0; padding: 4px; }\n .aup-collapse-toggle { background: none; border: none; cursor: pointer; padding: 4px 8px; color: var(--dim); font-size: 0.75rem; border-radius: var(--radius-sm); }\n .aup-collapse-toggle:hover { background: var(--hover); color: var(--text); }\n /* Shell responsive: hide sidebar/inspector/statusbar on small screens */\n @media (max-width: 768px) {\n .aup-view[data-mode=\"shell\"] > [data-role=\"body\"] > [data-role=\"sidebar\"] { display: none; }\n .aup-view[data-mode=\"shell\"] > [data-role=\"body\"] > [data-role=\"inspector\"] { display: none; }\n .aup-view[data-mode=\"shell\"] > [data-role=\"statusbar\"] { display: none; }\n }\n\n /* ── Tabs Mode ── */\n .aup-view[data-mode=\"tabs\"] { display: flex; flex-direction: column; overflow: hidden; }\n .aup-view[data-mode=\"tabs\"] > .aup-tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--surface); padding: 0 8px; flex-shrink: 0; overflow-x: auto; }\n .aup-view[data-mode=\"tabs\"] > .aup-tab-bar > .aup-tab { padding: 6px 14px; font-size: 0.8rem; cursor: pointer; border: none; background: none; color: var(--dim); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--transition), border-color var(--transition); }\n .aup-view[data-mode=\"tabs\"] > .aup-tab-bar > .aup-tab:hover { color: var(--text); background: var(--hover); }\n .aup-view[data-mode=\"tabs\"] > .aup-tab-bar > .aup-tab[data-active=\"true\"] { color: var(--accent); border-bottom-color: var(--accent); }\n .aup-view[data-mode=\"tabs\"] > .aup-tab-panel { flex: 1; overflow-y: auto; padding: 12px 16px; }\n .aup-view[data-mode=\"tabs\"] > .aup-tab-panel[data-active=\"false\"] { display: none; }\n\n /* ── Spatial Intent: Layout ── */\n .aup-view[data-align=\"start\"] { justify-content: flex-start; }\n .aup-view[data-align=\"center\"] { justify-content: center; }\n .aup-view[data-align=\"end\"] { justify-content: flex-end; }\n .aup-view[data-align=\"between\"] { justify-content: space-between; }\n .aup-view[data-cross-align=\"start\"] { align-items: flex-start; }\n .aup-view[data-cross-align=\"center\"] { align-items: center; }\n .aup-view[data-cross-align=\"end\"] { align-items: flex-end; }\n .aup-view[data-cross-align=\"stretch\"] { align-items: stretch; }\n\n /* ── Spatial Intent: Gap ── */\n .aup-view[data-gap=\"none\"] { gap: 0; }\n .aup-view[data-gap=\"xs\"] { gap: 4px; }\n .aup-view[data-gap=\"sm\"] { gap: 8px; }\n .aup-view[data-gap=\"md\"] { gap: 16px; }\n .aup-view[data-gap=\"lg\"] { gap: 24px; }\n .aup-view[data-gap=\"xl\"] { gap: 40px; }\n\n /* ── Spatial Intent: Wrap & Overflow ── */\n .aup-view[data-wrap=\"true\"] { flex-wrap: wrap; }\n .aup-view[data-wrap=\"true\"][style*=\"--grid-min-width\"] {\n display: grid !important;\n grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-width), 1fr));\n }\n .aup-view[data-overflow=\"auto\"] { overflow: auto; }\n .aup-view[data-overflow=\"hidden\"] { overflow: hidden; }\n .aup-view[data-overflow=\"scroll-x\"] { overflow-x: auto; overflow-y: hidden; }\n .aup-view[data-overflow=\"scroll-y\"] { overflow-x: hidden; overflow-y: auto; }\n\n /* ── Spatial Intent: Sizing ── */\n [data-width=\"hug\"] { width: fit-content; flex: none !important; }\n [data-width=\"fill\"] { width: 100%; }\n [data-max-width=\"xs\"] { max-width: 320px; }\n [data-max-width=\"sm\"] { max-width: 480px; }\n [data-max-width=\"md\"] { max-width: 640px; }\n [data-max-width=\"lg\"] { max-width: 960px; }\n [data-max-width=\"xl\"] { max-width: 1200px; }\n [data-max-width=\"full\"] { max-width: 100%; }\n [data-height=\"fill\"] { height: 100%; }\n .aup-view[data-layout=\"row\"] > .aup-view[data-width=\"fill\"] { flex: 1; min-width: 0; }\n\n .aup-text { color: var(--text); font-size: 0.95rem; line-height: 1.6; }\n .aup-text[data-level=\"1\"] { font-family: var(--font-heading); font-size: 2em; font-weight: var(--heading-weight); color: var(--accent); text-shadow: var(--glow); letter-spacing: var(--heading-spacing); text-transform: var(--heading-transform); line-height: 1.15; margin-bottom: 0.3em; }\n /* Gradient heading text — themes with --heading-gradient get background-clip */\n :not([data-theme=\"brutalist\"]):not([data-theme=\"brutalist-mono\"]) .aup-text[data-level=\"1\"] { background: var(--heading-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }\n .aup-text[data-scale=\"display\"] { background: var(--heading-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }\n :is([data-theme=\"brutalist\"], [data-theme=\"brutalist-mono\"]) .aup-text[data-scale=\"display\"] { background: none; -webkit-text-fill-color: unset; }\n .aup-text[data-level=\"2\"] { font-family: var(--font-heading); font-size: 1.5em; font-weight: var(--heading-weight); color: var(--text); letter-spacing: var(--heading-spacing); text-transform: var(--heading-transform); line-height: 1.25; margin-bottom: 0.25em; display: flex; align-items: center; gap: 10px; }\n .aup-text[data-level=\"2\"]::before { content: ''; width: 4px; height: 0.9em; border-radius: 2px; background: var(--heading-gradient, var(--accent)); flex-shrink: 0; }\n :is([data-theme=\"brutalist\"], [data-theme=\"brutalist-mono\"]) .aup-text[data-level=\"2\"]::before { border-radius: 0; background: var(--accent); }\n .aup-text[data-level=\"3\"] { font-family: var(--font-heading); font-size: 1.2em; font-weight: var(--heading-weight); color: var(--text); letter-spacing: var(--heading-spacing); margin-bottom: 0.2em; }\n .aup-text[data-level=\"4\"], .aup-text[data-level=\"5\"], .aup-text[data-level=\"6\"] { font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-spacing); }\n .aup-text[data-format=\"code\"] { font-family: var(--font-mono, monospace); background: var(--bg); padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border); white-space: pre-wrap; overflow: auto; }\n .aup-text[data-format=\"code\"] pre { margin: 0; padding: 12px; overflow: auto; }\n .aup-text[data-format=\"code\"] pre code { font-family: var(--font-mono, monospace); font-size: 0.85em; line-height: 1.5; }\n .aup-text[data-format=\"code\"] pre code.hljs { background: transparent; padding: 0; }\n .aup-text[data-intent=\"info\"] { color: var(--assistant-color); }\n .aup-text[data-intent=\"success\"] { color: var(--success); }\n .aup-text[data-intent=\"warning\"] { color: var(--accent); }\n .aup-text[data-intent=\"error\"] { color: var(--error); }\n\n /* ── Spatial Intent: Typography Scale ── */\n .aup-text[data-scale=\"display\"] { font-family: var(--font-display, var(--font-heading)); font-size: 3.5em; font-weight: var(--heading-weight); letter-spacing: -0.03em; line-height: 1.05; }\n .aup-text[data-scale=\"h1\"] { font-family: var(--font-heading); font-size: 2.25em; font-weight: var(--heading-weight); letter-spacing: var(--heading-spacing); line-height: 1.15; }\n .aup-text[data-scale=\"h2\"] { font-family: var(--font-heading); font-size: 1.65em; font-weight: var(--heading-weight); letter-spacing: var(--heading-spacing); line-height: 1.25; }\n .aup-text[data-scale=\"h3\"] { font-family: var(--font-heading); font-size: 1.2em; font-weight: var(--heading-weight); letter-spacing: var(--heading-spacing); }\n .aup-text[data-scale=\"body\"] { font-size: 1em; }\n .aup-text[data-scale=\"caption\"] { font-size: 0.85em; color: var(--dim); }\n .aup-text[data-scale=\"code\"] { font-size: 0.85em; font-family: \"JetBrains Mono\", \"Fira Code\", monospace; }\n\n /* ── Badge / Pill ── */\n .aup-text[data-mode=\"badge\"] { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.78em; font-weight: 600; background: var(--surface); border: 1px solid var(--border); letter-spacing: 0.02em; }\n .aup-text[data-mode=\"badge\"][data-intent=\"info\"] { background: color-mix(in srgb, var(--assistant-color) 20%, var(--bg)); border-color: color-mix(in srgb, var(--assistant-color) 40%, transparent); color: var(--assistant-color); box-shadow: 0 0 8px color-mix(in srgb, var(--assistant-color) 10%, transparent); }\n .aup-text[data-mode=\"badge\"][data-intent=\"success\"] { background: color-mix(in srgb, var(--success) 22%, var(--bg)); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); box-shadow: 0 0 8px color-mix(in srgb, var(--success) 10%, transparent); }\n .aup-text[data-mode=\"badge\"][data-intent=\"warning\"] { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent); }\n .aup-text[data-mode=\"badge\"][data-intent=\"error\"] { background: color-mix(in srgb, var(--error) 22%, var(--bg)); border-color: color-mix(in srgb, var(--error) 40%, transparent); color: var(--error); box-shadow: 0 0 8px color-mix(in srgb, var(--error) 10%, transparent); }\n\n .aup-action { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 16px; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font); font-size: 0.9rem; transition: all var(--transition) cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; }\n .aup-action:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }\n .aup-action:active { transform: translateY(0); }\n .aup-action[data-variant=\"primary\"] { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }\n .aup-action[data-variant=\"primary\"]:hover { filter: brightness(1.15); box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-1px); }\n .aup-action[data-variant=\"primary\"]:active { transform: translateY(0); filter: brightness(0.95); box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 25%, transparent); }\n .aup-action[data-variant=\"destructive\"] { background: color-mix(in srgb, var(--error) 12%, transparent); border-color: var(--error); color: var(--error); }\n .aup-action[data-variant=\"destructive\"]:hover { background: var(--error); color: var(--bg); box-shadow: 0 2px 8px color-mix(in srgb, var(--error) 35%, transparent); transform: translateY(-1px); }\n .aup-action[data-variant=\"ghost\"] { background: transparent; border-color: transparent; }\n .aup-action[data-variant=\"ghost\"]:hover { background: var(--surface); border-color: var(--border); transform: none; box-shadow: none; }\n .aup-action { display: inline-flex; align-items: center; gap: 6px; }\n .aup-action .aup-icon-svg { width: 1em; height: 1em; flex-shrink: 0; }\n .aup-action[data-size=\"xs\"] { padding: 3px 8px; font-size: 0.78em; }\n .aup-action[data-size=\"sm\"] { padding: 5px 12px; font-size: 0.85em; }\n .aup-action[data-size=\"lg\"] { padding: 10px 24px; font-size: 1em; }\n .aup-action[data-size=\"xl\"] { padding: 12px 32px; font-size: 1.1em; }\n\n /* ── AUP Ticker Primitive ── */\n .aup-ticker { overflow: hidden; width: 100%; white-space: nowrap; position: relative; font-family: var(--font); color: var(--text); padding: 6px 0; }\n .aup-ticker-track { display: inline-flex; align-items: center; will-change: transform; }\n .aup-ticker[data-mode=\"scroll\"] .aup-ticker-track { animation: ticker-scroll var(--ticker-duration, 20s) linear infinite; }\n .aup-ticker[data-mode=\"scroll\"][data-direction=\"ltr\"] .aup-ticker-track { animation-direction: reverse; }\n .aup-ticker[data-paused=\"true\"] .aup-ticker-track { animation-play-state: paused; }\n @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }\n .aup-ticker[data-mode=\"scroll\"] .aup-ticker-item,\n .aup-ticker[data-mode=\"static\"] .aup-ticker-item { display: inline-flex; align-items: center; flex-shrink: 0; }\n .aup-ticker-separator { display: inline-flex; align-items: center; flex-shrink: 0; padding: 0 8px; opacity: 0.5; }\n .aup-ticker[data-mode=\"flip\"] .aup-ticker-track { position: relative; width: 100%; min-height: 1.5em; }\n .aup-ticker[data-mode=\"flip\"] .aup-ticker-item { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; }\n .aup-ticker[data-mode=\"flip\"][data-flip-transition=\"slide-up\"] .aup-ticker-item { transform: translateY(100%); }\n .aup-ticker[data-mode=\"flip\"][data-flip-transition=\"slide-up\"] .aup-ticker-item.active { transform: translateY(0); }\n .aup-ticker[data-mode=\"flip\"][data-flip-transition=\"slide-left\"] .aup-ticker-item { transform: translateX(100%); }\n .aup-ticker[data-mode=\"flip\"][data-flip-transition=\"slide-left\"] .aup-ticker-item.active { transform: translateX(0); }\n .aup-ticker[data-mode=\"flip\"] .aup-ticker-item.active { opacity: 1; pointer-events: auto; }\n .aup-ticker[data-intent=\"breaking\"] { background: rgba(220,38,38,0.85); color: #fff; padding: 6px 12px; }\n .aup-ticker[data-intent=\"warning\"] { background: rgba(245,158,11,0.85); color: #000; padding: 6px 12px; }\n .aup-ticker[data-intent=\"success\"] { background: rgba(22,163,74,0.85); color: #fff; padding: 6px 12px; }\n .aup-ticker[data-intent=\"info\"] { background: rgba(37,99,235,0.85); color: #fff; padding: 6px 12px; }\n .aup-view[data-layout=\"overlay-grid\"] > .aup-ticker { width: 100%; }\n\n /* ── Role base — structural defaults (no colors, themes provide visual treatment) ── */\n [data-role=\"live-badge\"] { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.8rem; }\n [data-role=\"speaker-bar\"] { display: flex; flex-direction: column; gap: 2px; }\n [data-role=\"lower-third\"] { display: flex; flex-direction: column; gap: 2px; }\n [data-role=\"alert\"] { font-weight: 600; }\n [data-role=\"clock\"] { font-variant-numeric: tabular-nums; }\n [data-role=\"score-bug\"] { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }\n [data-role=\"data-widget\"] { display: block; }\n [data-role=\"featured-comment\"] { display: block; max-width: 400px; }\n\n .aup-unknown { border: 1px dashed var(--dim); padding: 8px; border-radius: var(--radius-sm); color: var(--dim); font-size: 0.8em; }\n\n /* ── AUP Time Primitive ── */\n .aup-time { font-family: var(--font); color: var(--text); font-variant-numeric: tabular-nums; }\n .aup-time-display { font-size: 1em; }\n .aup-time-clock { font-size: 2em; font-weight: 600; letter-spacing: 0.02em; }\n .aup-time-timer, .aup-time-countdown { font-size: 1.5em; font-weight: 500; font-family: \"Share Tech Mono\", \"JetBrains Mono\", monospace; }\n .aup-time-picker input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: var(--radius-sm); font-family: var(--font); outline: none; }\n .aup-time-picker input:focus { border-color: var(--accent); }\n\n /* ── AUP Chart Primitive ── */\n .aup-chart { position: relative; min-height: 200px; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); padding: 16px; }\n .aup-chart canvas { width: 100% !important; height: 100% !important; }\n .aup-chart-loading { color: var(--dim); text-align: center; padding: 40px; font-size: 0.9em; }\n\n /* ── AUP Finance Chart (TradingView Lightweight Charts) ── */\n .aup-finance-chart { position: relative; min-height: 200px; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); overflow: hidden; }\n .aup-finance-chart-loading { color: var(--dim); text-align: center; padding: 40px; font-size: 0.9em; }\n\n /* ── AUP Map Primitive ── */\n .aup-map { min-height: 300px; border: var(--card-border); border-radius: var(--radius-lg); overflow: hidden; position: relative; }\n .aup-map-loading { color: var(--dim); text-align: center; padding: 40px; font-size: 0.9em; }\n .aup-map .leaflet-popup-content-wrapper { background: var(--card-bg); color: var(--text); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); border: 1px solid var(--border); font-family: var(--font-body); }\n .aup-map .leaflet-popup-tip { background: var(--card-bg); }\n .aup-map .leaflet-popup-content { margin: 8px 12px; font-size: 0.85em; line-height: 1.5; }\n .aup-map .leaflet-control-attribution { font-size: 10px; opacity: 0.6; }\n .aup-map .leaflet-control-zoom a { background: var(--card-bg); color: var(--text); border-color: var(--border); }\n .aup-map .leaflet-control-zoom a:hover { background: var(--hover-bg); }\n\n /* ── AUP Calendar Primitive ── */\n .aup-calendar { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); padding: 16px; }\n .aup-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }\n .aup-calendar-header button { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); }\n .aup-calendar-header button:hover { border-color: var(--accent); color: var(--accent); }\n .aup-calendar-header .aup-calendar-title { font-weight: 600; font-size: 1.05em; }\n .aup-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }\n .aup-calendar-day-header { text-align: center; font-size: 0.75em; font-weight: 600; color: var(--dim); padding: 4px; text-transform: uppercase; }\n .aup-calendar-day { text-align: center; padding: 6px 4px; border-radius: var(--radius-sm); font-size: 0.85em; cursor: default; position: relative; min-height: 32px; }\n .aup-calendar-day.today { background: var(--accent-bg); color: var(--accent); font-weight: 700; }\n .aup-calendar-day.other-month { color: var(--dim); opacity: 0.4; }\n .aup-calendar-day .aup-calendar-event { display: block; font-size: 0.65em; margin-top: 2px; padding: 1px 3px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .aup-calendar-event[data-intent=\"info\"] { background: rgba(96,165,250,0.2); color: #60a5fa; }\n .aup-calendar-event[data-intent=\"success\"] { background: rgba(74,222,128,0.2); color: #4ade80; }\n .aup-calendar-event[data-intent=\"warning\"] { background: rgba(251,191,36,0.2); color: #fbbf24; }\n .aup-calendar-event[data-intent=\"error\"] { background: rgba(248,113,113,0.2); color: #f87171; }\n\n /* ── AUP Moon Phase ── */\n .aup-moonphase { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); padding: 24px; }\n .aup-moonphase-visual { font-size: 4rem; line-height: 1; filter: drop-shadow(0 0 12px rgba(200,200,255,0.3)); }\n .aup-moonphase-name { font-size: 1.1em; font-weight: 600; text-transform: capitalize; }\n .aup-moonphase-details { display: flex; gap: 20px; font-size: 0.85em; color: var(--dim); }\n .aup-moonphase-details span { display: flex; align-items: center; gap: 4px; }\n .aup-moonphase-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; margin-top: 8px; }\n .aup-moonphase-month-day { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.72em; color: var(--dim); padding: 4px 2px; border-radius: var(--radius-sm); }\n .aup-moonphase-month-day.today { background: rgba(99,102,241,0.15); color: var(--accent); }\n .aup-moonphase-month-day .moon-emoji { font-size: 1.3em; }\n\n /* ── AUP Natal Chart ── */\n .aup-natal-chart { position: relative; min-height: 200px; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); overflow: hidden; padding: 16px; }\n .aup-natal-chart-loading { color: var(--dim); text-align: center; padding: 40px; font-size: 0.9em; }\n .aup-natal-chart svg { display: block; margin: 0 auto; }\n .aup-natal-aspects { margin-top: 16px; }\n .aup-natal-aspects table { width: 100%; border-collapse: collapse; font-size: 0.82em; }\n .aup-natal-aspects th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border); color: var(--dim); font-weight: 600; }\n .aup-natal-aspects td { padding: 5px 8px; border-bottom: 1px solid var(--border); }\n .aup-natal-aspects tr:hover { background: rgba(99,102,241,0.06); }\n .aup-natal-planets { margin-top: 12px; }\n .aup-natal-planets table { width: 100%; border-collapse: collapse; font-size: 0.82em; }\n .aup-natal-planets th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--border); color: var(--dim); font-weight: 600; }\n .aup-natal-planets td { padding: 5px 8px; border-bottom: 1px solid var(--border); }\n\n /* ── AUP Input ── */\n .aup-input { display: flex; flex-direction: column; gap: 4px; width: 100%; }\n .aup-input label { color: var(--dim); font-size: 0.85em; }\n .aup-input input, .aup-input select, .aup-input textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: var(--radius-md); font-family: var(--font); font-size: 0.9rem; outline: none; transition: border-color var(--transition); width: 100%; }\n .aup-input input:focus, .aup-input select:focus, .aup-input textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }\n .aup-input .aup-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; }\n .aup-input .aup-toggle-track { width: 40px; height: 22px; border-radius: 11px; background: var(--border); position: relative; transition: background var(--transition), box-shadow var(--transition); cursor: pointer; }\n .aup-input .aup-toggle-track.on { background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); }\n .aup-input .aup-toggle-thumb { width: 18px; height: 18px; border-radius: 50%; background: white; position: absolute; top: 2px; left: 2px; transition: left var(--transition) cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }\n .aup-input .aup-toggle-track.on .aup-toggle-thumb { left: 20px; }\n .aup-input input[type=\"range\"] { accent-color: var(--accent); }\n .aup-input input[type=\"checkbox\"] { accent-color: var(--accent); width: 16px; height: 16px; }\n .aup-input .aup-checkbox-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }\n .aup-progress { width: 100%; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }\n .aup-progress-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, white 15%, transparent) 50%, transparent 100%); background-size: 200% 100%; }\n .aup-progress-fill[data-intent=\"success\"] { background: var(--success); }\n .aup-progress-fill[data-intent=\"error\"] { background: var(--error); }\n .aup-progress-fill[data-intent=\"info\"] { background: var(--assistant-color); }\n .aup-progress-row { display: flex; align-items: center; gap: 8px; }\n .aup-progress-label { font-size: 0.85em; color: var(--dim); white-space: nowrap; }\n\n /* ── AUP Media ── */\n .aup-media { display: inline-block; }\n .aup-media img { max-width: 100%; height: auto; border-radius: var(--radius-md); object-fit: contain; }\n .aup-media .aup-icon { font-size: 1.5em; display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: 50%; background: var(--surface); }\n .aup-media .aup-icon-svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }\n .aup-media video { max-width: 100%; border-radius: var(--radius-sm); }\n .aup-media .aup-placeholder { width: 100px; height: 100px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 0.8em; }\n .aup-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--accent-bg); color: var(--accent); font-weight: 600; flex-shrink: 0; }\n .aup-avatar img { width: 100%; height: 100%; object-fit: cover; }\n .aup-avatar[data-size=\"xs\"] { width: 24px; height: 24px; font-size: 0.65em; }\n .aup-avatar[data-size=\"sm\"] { width: 32px; height: 32px; font-size: 0.75em; }\n .aup-avatar[data-size=\"md\"], .aup-avatar:not([data-size]) { width: 40px; height: 40px; font-size: 0.9em; }\n .aup-avatar[data-size=\"lg\"] { width: 56px; height: 56px; font-size: 1.1em; }\n .aup-avatar[data-size=\"xl\"] { width: 80px; height: 80px; font-size: 1.4em; }\n\n /* ── AUP Overlay ── */\n .aup-overlay { display: none; }\n .aup-overlay.open { display: contents; }\n .aup-overlay-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 1000; animation: aup-backdrop-in 0.25s ease both; }\n .aup-overlay-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; z-index: 1001; min-width: 320px; max-width: 80vw; max-height: 80vh; overflow-y: auto; box-shadow: 0 24px 48px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); animation: aup-dialog-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both; }\n .aup-overlay-dialog-title { font-family: var(--font-heading); font-weight: var(--heading-weight); color: var(--text); margin-bottom: 16px; font-size: 1.2em; letter-spacing: var(--heading-spacing); }\n .aup-overlay-popover { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 0; z-index: 9999; min-width: 160px; max-width: 320px; max-height: 400px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: aup-dialog-in 0.15s cubic-bezier(0.4, 0, 0.2, 1) both; }\n .aup-overlay:not(.open) > .aup-overlay-popover { display: none; }\n .aup-overlay-popover .aup-action { display: block; width: 100%; text-align: left; padding: 6px 16px; border-radius: 0; border: none; background: none; }\n .aup-overlay-popover .aup-action:hover { background: var(--hover); }\n .aup-overlay-drawer { position: fixed; top: 0; bottom: 0; background: var(--surface); border-left: 1px solid var(--border); z-index: 1001; width: 320px; padding: 16px; overflow-y: auto; box-shadow: -8px 0 24px rgba(0,0,0,0.15); }\n .aup-overlay-drawer.right { right: 0; animation: aup-drawer-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; }\n .aup-overlay-drawer.left { left: 0; border-left: none; border-right: 1px solid var(--border); animation: aup-drawer-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; box-shadow: 8px 0 24px rgba(0,0,0,0.15); }\n .aup-overlay-toast { position: fixed; z-index: 2100; max-width: 400px; min-width: 280px; animation: aup-toast-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; display: flex; flex-direction: column; }\n .aup-overlay-toast.exiting { animation: aup-toast-out 0.25s ease forwards; }\n /* Position variants */\n .aup-overlay-toast[data-position=\"bottom-right\"], .aup-overlay-toast:not([data-position]) { bottom: 80px; right: 20px; }\n .aup-overlay-toast[data-position=\"bottom-left\"] { bottom: 80px; left: 20px; }\n .aup-overlay-toast[data-position=\"bottom-center\"] { bottom: 80px; left: 50%; transform: translateX(-50%); }\n .aup-overlay-toast[data-position=\"top-right\"] { top: 20px; right: 20px; }\n .aup-overlay-toast[data-position=\"top-left\"] { top: 20px; left: 20px; }\n .aup-overlay-toast[data-position=\"top-center\"] { top: 20px; left: 50%; transform: translateX(-50%); }\n /* Intent accent — left border stripe */\n .aup-overlay-toast[data-intent=\"success\"] { border-left: 3px solid var(--success); }\n .aup-overlay-toast[data-intent=\"error\"] { border-left: 3px solid var(--error); }\n .aup-overlay-toast[data-intent=\"warning\"] { border-left: 3px solid var(--accent); }\n .aup-overlay-toast[data-intent=\"info\"] { border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--text)); }\n /* Body layout */\n .aup-toast-body { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; }\n .aup-toast-icon { flex-shrink: 0; font-size: 1.3em; line-height: 1; margin-top: 1px; }\n .aup-toast-icon img { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; }\n .aup-toast-content { flex: 1; min-width: 0; }\n .aup-toast-title { font-weight: 600; font-size: 0.9em; color: var(--text); margin-bottom: 2px; }\n .aup-toast-message { font-size: 0.84em; color: var(--dim); line-height: 1.4; }\n .aup-toast-close { flex-shrink: 0; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 1.1em; padding: 0 2px; line-height: 1; opacity: 0.6; transition: opacity var(--transition); }\n .aup-toast-close:hover { opacity: 1; }\n /* Timer bar */\n .aup-toast-timer { height: 3px; background: color-mix(in srgb, var(--accent) 20%, transparent); }\n .aup-toast-timer-bar { height: 100%; background: var(--accent); transition: width linear; }\n .aup-overlay-toast[data-intent=\"success\"] .aup-toast-timer-bar { background: var(--success); }\n .aup-overlay-toast[data-intent=\"error\"] .aup-toast-timer-bar { background: var(--error); }\n .aup-overlay-toast[data-intent=\"warning\"] .aup-toast-timer-bar { background: var(--accent); }\n /* ── Alert / Confirm ── */\n .aup-overlay-alert { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 32px; z-index: 1001; min-width: 340px; max-width: 480px; text-align: center; box-shadow: 0 24px 48px rgba(0,0,0,0.25); animation: aup-dialog-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both; }\n .aup-alert-icon { font-size: 2.4em; margin-bottom: 12px; line-height: 1; }\n .aup-alert-icon[data-intent=\"info\"] { color: var(--accent); }\n .aup-alert-icon[data-intent=\"success\"] { color: var(--success); }\n .aup-alert-icon[data-intent=\"error\"] { color: var(--error); }\n .aup-alert-icon[data-intent=\"warning\"] { color: #f0a030; }\n .aup-alert-title { font-family: var(--font-heading); font-weight: var(--heading-weight); color: var(--text); font-size: 1.25em; margin-bottom: 8px; letter-spacing: var(--heading-spacing); }\n .aup-alert-message { color: var(--dim); font-size: 0.92em; line-height: 1.5; margin-bottom: 20px; }\n .aup-alert-actions { display: flex; gap: 8px; justify-content: center; }\n .aup-alert-btn { padding: 8px 24px; border-radius: var(--radius-md); font-family: var(--font); font-size: 0.9em; font-weight: 600; cursor: pointer; transition: all var(--transition); border: 1px solid var(--border); }\n .aup-alert-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }\n .aup-alert-btn.primary:hover { filter: brightness(1.15); transform: translateY(-1px); }\n .aup-alert-btn.secondary { background: transparent; color: var(--text); }\n .aup-alert-btn.secondary:hover { background: var(--accent-bg); border-color: var(--accent); }\n .aup-alert-btn.danger { background: var(--error); border-color: var(--error); color: #fff; }\n .aup-alert-btn.danger:hover { filter: brightness(1.1); }\n\n /* ── HUD (fullscreen status) ── */\n .aup-overlay-hud { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 48px; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,0.25); animation: aup-dialog-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) both; }\n .aup-hud-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: aup-spin 0.8s linear infinite; }\n .aup-hud-icon { font-size: 2em; }\n .aup-hud-message { color: var(--text); font-size: 0.95em; font-weight: 500; }\n .aup-hud-sub { color: var(--dim); font-size: 0.82em; }\n .aup-hud-progress { width: 160px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }\n .aup-hud-progress-bar { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.3s ease; }\n @keyframes aup-spin { to { transform: rotate(360deg); } }\n\n /* ── Choice / AskUser (Claude Code style) ── */\n .aup-overlay-choice { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; z-index: 1001; min-width: 420px; max-width: 560px; max-height: 80vh; overflow: hidden; box-shadow: 0 24px 48px rgba(0,0,0,0.25); animation: aup-dialog-in 0.2s cubic-bezier(0.4, 0, 0.2, 1) both; display: flex; flex-direction: column; }\n .aup-choice-header { padding: 20px 24px 0; }\n .aup-choice-tag { display: inline-block; font-size: 0.7em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: var(--accent-bg); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }\n .aup-choice-question { font-family: var(--font-heading); font-weight: var(--heading-weight); color: var(--text); font-size: 1.15em; line-height: 1.4; letter-spacing: var(--heading-spacing); margin-bottom: 4px; }\n .aup-choice-hint { color: var(--dim); font-size: 0.82em; margin-bottom: 0; }\n .aup-choice-options { padding: 12px 12px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }\n .aup-choice-option { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); background: transparent; text-align: left; font-family: var(--font); }\n .aup-choice-option:hover { border-color: var(--accent); background: var(--accent-bg); }\n .aup-choice-option.selected { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent); }\n .aup-choice-radio { flex-shrink: 0; width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 50%; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }\n .aup-choice-check { flex-shrink: 0; width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 4px; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: all var(--transition); }\n .aup-choice-option.selected .aup-choice-radio { border-color: var(--accent); }\n .aup-choice-option.selected .aup-choice-radio::after { content: \"\"; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }\n .aup-choice-option.selected .aup-choice-check { border-color: var(--accent); background: var(--accent); }\n .aup-choice-option.selected .aup-choice-check::after { content: \"\"; width: 10px; height: 7px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(-45deg) translate(1px, -1px); }\n .aup-choice-label { font-weight: 500; color: var(--text); font-size: 0.92em; }\n .aup-choice-desc { color: var(--dim); font-size: 0.82em; line-height: 1.4; margin-top: 2px; }\n .aup-choice-other { display: flex; gap: 8px; padding: 0 12px 16px; }\n .aup-choice-other input { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: var(--radius-md); font-family: var(--font); font-size: 0.9em; outline: none; transition: border-color var(--transition); }\n .aup-choice-other input:focus { border-color: var(--accent); }\n .aup-choice-other input::placeholder { color: var(--dim); }\n .aup-choice-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: color-mix(in srgb, var(--bg) 50%, var(--surface)); }\n .aup-choice-stepper { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 24px 4px; }\n .aup-choice-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: all var(--transition); }\n .aup-choice-dot.active { background: var(--accent); transform: scale(1.3); }\n .aup-choice-dot.done { background: var(--accent); opacity: 0.5; }\n .aup-choice-step-label { font-size: 0.72em; color: var(--dim); margin-left: 8px; }\n .aup-choice-step-body { animation: aup-step-in 0.2s ease; }\n @keyframes aup-step-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }\n .aup-choice-footer { align-items: center; }\n .aup-choice-footer .spacer { flex: 1; }\n\n @keyframes aup-toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }\n @keyframes aup-toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-8px) scale(0.97); } }\n @keyframes aup-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes aup-backdrop-in { from { opacity: 0; } to { opacity: 1; } }\n @keyframes aup-dialog-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }\n @keyframes aup-drawer-right { from { transform: translateX(100%); } to { transform: translateX(0); } }\n @keyframes aup-drawer-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }\n @keyframes aup-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }\n #aup-root.aup-animating { animation: aup-page-in 0.25s ease-out; }\n .msg { animation: aup-msg-in 0.2s ease-out; }\n\n /* ── AUP Table ── */\n .aup-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--msg-font-size); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }\n .aup-table th { text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--border); color: var(--dim); font-weight: 600; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.06em; background: var(--surface); cursor: pointer; user-select: none; transition: color var(--transition), background var(--transition); }\n .aup-table th:hover { color: var(--accent); background: var(--accent-bg); }\n .aup-table th[data-align=\"right\"] { text-align: right; }\n .aup-table th[data-align=\"center\"] { text-align: center; }\n .aup-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); transition: background var(--transition); }\n .aup-table td[data-align=\"right\"] { text-align: right; }\n .aup-table td[data-align=\"center\"] { text-align: center; }\n .aup-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 50%, transparent); }\n .aup-table tr:hover td { background: var(--accent-bg); }\n .aup-table tbody tr:last-child td { border-bottom: none; }\n .aup-table .aup-table-empty { text-align: center; color: var(--dim); padding: 20px; }\n\n /* ── AUP Terminal Subsystem ── */\n .aup-terminal { background: #0c0c0c; border: 1px solid var(--border); border-radius: var(--radius-lg); min-height: 200px; padding: 8px; font-family: var(--font); font-size: 13px; color: #cccccc; overflow: auto; white-space: pre-wrap; }\n .aup-terminal-placeholder { color: var(--dim); text-align: center; padding: 40px; font-size: 0.9em; }\n\n /* ── AUP Editor Subsystem ── */\n .aup-editor { display: flex; flex-direction: column; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); overflow: hidden; }\n .aup-editor-toolbar { display: flex; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }\n .aup-editor-toolbar button { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 3px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.78em; transition: all var(--transition); }\n .aup-editor-toolbar button:hover { border-color: var(--accent); color: var(--accent); }\n .aup-editor-toolbar .active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }\n .aup-editor-area { flex: 1; min-height: 200px; position: relative; }\n .aup-editor-area textarea { width: 100%; height: 100%; min-height: 200px; background: transparent; color: transparent; caret-color: var(--text); border: none; padding: 12px; font-family: \"JetBrains Mono\", \"Fira Code\", monospace; font-size: 13px; line-height: 1.6; resize: vertical; outline: none; tab-size: 2; position: relative; z-index: 1; }\n .aup-editor-highlight { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 12px; font-family: \"JetBrains Mono\", \"Fira Code\", monospace; font-size: 13px; line-height: 1.6; tab-size: 2; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; pointer-events: none; background: var(--bg); color: var(--text); }\n .aup-editor-highlight code { background: transparent !important; padding: 0 !important; font-size: inherit; line-height: inherit; }\n .aup-editor-statusbar { display: flex; justify-content: space-between; padding: 4px 10px; font-size: 0.75em; color: var(--dim); border-top: 1px solid var(--border); background: var(--surface); }\n .aup-editor-gutter { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; padding: 12px 4px; text-align: right; font-family: \"JetBrains Mono\", monospace; font-size: 13px; line-height: 1.6; color: var(--dim); background: var(--surface); border-right: 1px solid var(--border); user-select: none; overflow: hidden; white-space: pre; }\n .aup-editor-area.has-gutter textarea { padding-left: 48px; }\n .aup-editor-area.has-gutter .aup-editor-highlight { padding-left: 48px; }\n\n /* ── AUP Frame (sandboxed iframe page isolation) ── */\n .aup-frame { position: relative; width: 100%; min-height: 200px; flex: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--card-bg); border: var(--card-border); display: flex; flex-direction: column; }\n .aup-frame iframe { width: 100%; flex: 1; min-height: 200px; border: none; display: block; }\n .aup-frame[data-size-width] iframe { width: auto; }\n .aup-frame[data-size-height] iframe { min-height: 0; }\n .aup-frame-loading { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: var(--surface); }\n .aup-frame-loading-bar { width: 120px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; position: relative; }\n .aup-frame-loading-bar::after { content: ''; position: absolute; left: -40%; width: 40%; height: 100%; background: var(--accent); border-radius: 2px; animation: aup-frame-shimmer 1.2s ease-in-out infinite; }\n @keyframes aup-frame-shimmer { 0% { left: -40%; } 100% { left: 100%; } }\n .aup-frame-error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 200px; color: var(--dim); padding: 24px; text-align: center; }\n .aup-frame-error-icon { font-size: 2em; }\n .aup-frame-error-msg { font-size: 0.9em; }\n .aup-frame-retry { background: var(--accent); color: var(--bg); border: none; padding: 6px 16px; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font); font-size: 0.85em; font-weight: 500; transition: all var(--transition); }\n .aup-frame-retry:hover { filter: brightness(1.15); }\n\n /* ── AUP Device (nested AUP rendering surface) ── */\n .aup-device { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); min-height: 60px; }\n .aup-device[data-aup-device-sizing=\"fixed\"] { overflow: hidden; }\n .aup-device[data-aup-device-sizing=\"fixed\"] .aup-device-content { width: 100%; height: 100%; overflow: auto; }\n .aup-device[data-aup-device-sizing=\"fit\"] .aup-device-content { width: 100%; }\n .aup-device-status { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); z-index: 1; transition: background 0.3s; }\n .aup-device-status.connected { background: var(--success, #22c55e); }\n .aup-device-status.error { background: var(--error, #ef4444); }\n .aup-device-fallback { padding: 12px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--muted); text-align: center; font-size: 0.85em; }\n .aup-device-breadcrumb { display: flex; align-items: center; gap: 2px; padding: 6px 12px; font-size: 12px; color: var(--dim); border-bottom: 1px solid var(--border); background: var(--surface); overflow-x: auto; white-space: nowrap; }\n .aup-device-breadcrumb-sep { opacity: 0.4; margin: 0 2px; }\n .aup-device-breadcrumb-seg { cursor: pointer; color: var(--accent); transition: opacity var(--transition); }\n .aup-device-breadcrumb-seg:hover { opacity: 0.8; text-decoration: underline; }\n .aup-device-breadcrumb-cur { color: var(--text); font-weight: 500; }\n\n /* ── AUP Device view selector (tabs / dropdown) ── */\n .aup-device-view-selector { display: flex; align-items: center; gap: 0; padding: 0 8px; border-bottom: 1px solid var(--border); background: var(--surface); font-size: 13px; overflow-x: auto; white-space: nowrap; }\n .aup-device-view-tab { padding: 6px 12px; cursor: pointer; color: var(--dim); border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; user-select: none; }\n .aup-device-view-tab:hover { color: var(--text); }\n .aup-device-view-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }\n .aup-device-view-dropdown { padding: 4px 8px; margin: 4px 8px; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; }\n .aup-device-view-dropdown:focus { outline: 2px solid var(--accent); outline-offset: -1px; }\n\n /* ── AUP src binding: loading skeleton & error banner ── */\n .aup-src-loading { display: flex; align-items: center; justify-content: center; padding: 16px; }\n .aup-src-loading-bar { width: 120px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; position: relative; }\n .aup-src-loading-bar::after { content: ''; position: absolute; left: -40%; width: 40%; height: 100%; background: var(--accent); border-radius: 2px; animation: aup-frame-shimmer 1.2s ease-in-out infinite; }\n .aup-src-error { padding: 8px 12px; background: var(--error-bg, rgba(220,38,38,0.1)); color: var(--error, #ef4444); font-size: 0.85em; border-radius: var(--radius-sm); margin: 4px 0; }\n\n /* ── AUP Canvas Subsystem ── */\n .aup-canvas { background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }\n .aup-canvas-toolbar { display: flex; gap: 4px; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--surface); align-items: center; }\n .aup-canvas-toolbar button { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8em; transition: all var(--transition); }\n .aup-canvas-toolbar button:hover { border-color: var(--accent); color: var(--accent); }\n .aup-canvas-toolbar button.active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }\n .aup-canvas-toolbar .separator { width: 1px; height: 18px; background: var(--border); }\n .aup-canvas-toolbar input[type=\"color\"] { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: none; padding: 2px; }\n .aup-canvas-toolbar input[type=\"range\"] { width: 60px; accent-color: var(--accent); }\n .aup-canvas-area { flex: 1; position: relative; }\n .aup-canvas-area canvas { display: block; cursor: crosshair; }\n\n /* ── Entrance Animations ── */\n [data-animate] { opacity: 0; }\n [data-animate].aup-animated { animation-fill-mode: both; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }\n [data-animate=\"fade-in\"].aup-animated { animation-name: aup-fade-in; animation-duration: 600ms; }\n [data-animate=\"slide-up\"].aup-animated { animation-name: aup-slide-up; animation-duration: 700ms; }\n [data-animate=\"slide-down\"].aup-animated { animation-name: aup-slide-down; animation-duration: 700ms; }\n [data-animate=\"slide-left\"].aup-animated { animation-name: aup-slide-left; animation-duration: 700ms; }\n [data-animate=\"zoom-in\"].aup-animated { animation-name: aup-zoom-in; animation-duration: 600ms; }\n [data-animate=\"blur-in\"].aup-animated { animation-name: aup-blur-in; animation-duration: 800ms; }\n [data-animate=\"scale-card\"].aup-animated { animation-name: aup-scale-card; animation-duration: 500ms; }\n [data-animate=\"count-up\"].aup-animated { animation-name: aup-fade-in; animation-duration: 600ms; }\n\n @keyframes aup-fade-in { from { opacity: 0; } to { opacity: 1; } }\n @keyframes aup-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes aup-slide-down { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes aup-slide-left { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }\n @keyframes aup-zoom-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }\n @keyframes aup-blur-in { from { opacity: 0; filter: blur(8px); transform: scale(0.97); } to { opacity: 1; filter: blur(0); transform: scale(1); } }\n @keyframes aup-scale-card { from { opacity: 0; transform: scale(0.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }\n\n /* ── Background video ── */\n .aup-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }\n .aup-view:has(.aup-bg-video) > *:not(.aup-bg-video) { position: relative; z-index: 1; }\n\n /* ── Audio ── */\n .aup-media audio { width: 100%; max-width: 400px; }\n\n /* ── Chrome toolbar (floating bottom-right: locale + theme) ── */\n #chrome-toolbar { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: none; align-items: stretch; gap: 12px; padding: 12px 18px; background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.05); }\n #chrome-toolbar.visible { display: flex; }\n #chrome-toolbar .toolbar-group { display: flex; flex-direction: column; gap: 2px; }\n #chrome-toolbar .toolbar-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); font-family: var(--font); }\n #chrome-toolbar select { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 14px; padding: 6px 12px; border-radius: var(--radius-md); cursor: pointer; outline: none; transition: all var(--transition); min-width: 90px; }\n #chrome-toolbar select:hover { border-color: var(--accent); color: var(--accent); }\n a.aup-action { text-decoration: none; display: inline-block; }\n a.aup-action[data-variant=\"active\"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }\n /* ── Focus ring ── */\n .aup-action:focus-visible, .aup-input input:focus-visible, .aup-input select:focus-visible, .aup-input textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }\n\n /* ══════════════════════════════════════════════════\n AFS List Primitive\n Two dimensions: layout (spatial) × itemStyle (per-item)\n ══════════════════════════════════════════════════ */\n .aup-list { display: flex; flex-direction: column; height: 100%; overflow: hidden; font-family: var(--font); color: var(--text); }\n\n .aup-list-loading { padding: 16px; color: var(--dim); font-size: 13px; text-align: center; }\n .aup-list-empty { padding: 24px 16px; color: var(--dim); font-size: 13px; text-align: center; }\n .aup-list-load-more { padding: 12px 16px; text-align: center; color: var(--accent); cursor: pointer; font-size: 12px; border-top: 1px solid var(--border); }\n .aup-list-load-more:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }\n .aup-list-virtual-spacer { flex-shrink: 0; }\n .aup-list-virtual-content { flex-shrink: 0; }\n .aup-list-template-item { cursor: pointer; }\n .aup-list-template-header { flex-shrink: 0; }\n\n /* ── Search ── */\n .aup-list-search { padding: 6px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }\n .aup-list-search-input { width: 100%; padding: 5px 10px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 80%, var(--surface)); color: var(--text); outline: none; font-family: var(--font); }\n .aup-list-search-input:focus { border-color: var(--accent); }\n .aup-list-search-input::placeholder { color: var(--dim); }\n\n /* ── Breadcrumb ── */\n .aup-list-breadcrumb { display: flex; align-items: center; gap: 2px; padding: 8px 12px; font-size: 12px; color: var(--dim); border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; white-space: nowrap; }\n .aup-list-breadcrumb-sep { opacity: 0.4; margin: 0 2px; }\n .aup-list-breadcrumb-seg { cursor: pointer; color: var(--accent); transition: opacity var(--transition); }\n .aup-list-breadcrumb-seg:hover { opacity: 0.8; text-decoration: underline; }\n .aup-list-breadcrumb-cur { color: var(--text); font-weight: 500; }\n\n /* ── Body — layout dimension ── */\n .aup-list-body { display: flex; flex-direction: column; overflow-y: auto; flex: 1; min-height: 0; }\n\n /* Layout: list (default) */\n .aup-list[data-layout=\"list\"] .aup-list-body { gap: 1px; }\n\n /* Layout: grid */\n .aup-list[data-layout=\"grid\"] .aup-list-body {\n display: grid;\n grid-template-columns: repeat(var(--list-cols, 3), 1fr);\n gap: 12px; padding: 12px;\n }\n .aup-list[data-layout=\"grid\"][data-auto-fill] .aup-list-body {\n grid-template-columns: repeat(auto-fill, minmax(var(--list-min-width, 200px), 1fr));\n }\n @media (max-width: 600px) {\n .aup-list[data-layout=\"grid\"]:not([data-auto-fill]) .aup-list-body { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; }\n }\n\n /* Layout: masonry — CSS columns */\n .aup-list[data-layout=\"masonry\"] .aup-list-body {\n display: block; column-count: var(--list-cols, 3); column-gap: 12px; padding: 12px;\n }\n .aup-list[data-layout=\"masonry\"] .aup-list-body > * { break-inside: avoid; margin-bottom: 12px; }\n .aup-list[data-layout=\"masonry\"] .aup-list-media { aspect-ratio: auto; }\n .aup-list[data-layout=\"masonry\"] .aup-list-media-img { width: 100%; height: auto; object-fit: contain; }\n @media (max-width: 600px) {\n .aup-list[data-layout=\"masonry\"] .aup-list-body { column-count: 2; }\n }\n\n /* Layout: slideshow */\n .aup-list[data-layout=\"slideshow\"] .aup-list-body { position: relative; overflow: hidden; }\n .aup-list-slideshow-nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px; border-top: 1px solid var(--border); flex-shrink: 0; }\n .aup-list-slide-btn { background: none; border: 1px solid var(--border); color: var(--text); width: 32px; height: 32px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background var(--transition); }\n .aup-list-slide-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }\n .aup-list-slide-counter { font-size: 12px; color: var(--dim); min-width: 48px; text-align: center; }\n\n /* ── Item Style: row (default) ── */\n .aup-list-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; transition: background var(--transition); border-radius: var(--radius-sm); margin: 0 4px; }\n .aup-list-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }\n .aup-list-row[data-selected=\"true\"] { background: color-mix(in srgb, var(--accent) 15%, transparent); }\n .aup-list-row[data-selected=\"true\"] .aup-list-label { color: var(--accent); }\n\n /* ── Item Style: card ── */\n .aup-list-card { display: flex; flex-direction: column; border: var(--card-border); border-radius: var(--radius-md); background: var(--card-bg); box-shadow: var(--card-shadow); overflow: hidden; cursor: pointer; transition: box-shadow var(--transition), transform var(--transition); }\n .aup-list-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }\n .aup-list-card[data-selected=\"true\"] { outline: 2px solid var(--accent); outline-offset: -2px; }\n .aup-list-card-image { height: 140px; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: color-mix(in srgb, var(--surface) 80%, var(--border)); }\n .aup-list-card-avatar-area { display: flex; align-items: center; justify-content: center; padding: 20px 0 8px; background: color-mix(in srgb, var(--surface) 80%, var(--border)); }\n .aup-list-card-avatar { width: 80px; height: 80px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }\n .aup-list-card-icon-area { height: 80px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 80%, var(--border)); color: var(--dim); }\n .aup-list-card-icon-area .aup-icon-svg { width: 32px; height: 32px; }\n .aup-list-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }\n .aup-list-card-title { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .aup-list-card-desc { font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }\n\n /* ── Item Style: compact ── */\n .aup-list-compact { display: flex; align-items: center; gap: 6px; padding: 3px 8px; cursor: pointer; font-size: 12px; transition: background var(--transition); border-radius: var(--radius-sm); }\n .aup-list-compact:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }\n .aup-list-compact[data-selected=\"true\"] { background: color-mix(in srgb, var(--accent) 15%, transparent); }\n .aup-list-compact .aup-list-icon { width: 14px; height: 14px; }\n .aup-list-compact .aup-icon-svg { width: 12px; height: 12px; }\n\n /* ── Item Style: media ── */\n .aup-list-media { position: relative; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; aspect-ratio: 4/3; }\n .aup-list-media:hover .aup-list-media-overlay { opacity: 1; }\n .aup-list-media[data-selected=\"true\"] { outline: 2px solid var(--accent); outline-offset: -2px; }\n .aup-list-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }\n .aup-list-media-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--surface) 70%, var(--border)); color: var(--dim); }\n .aup-list-media-placeholder .aup-icon-svg { width: 40px; height: 40px; }\n .aup-list-media-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 10px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); opacity: 0; transition: opacity var(--transition); }\n .aup-list-media-title { font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }\n .aup-list-media-subtitle { font-size: 11px; color: rgba(255,255,255,0.75); margin-top: 2px; }\n .aup-list-media-footer { font-size: 10px; color: rgba(255,255,255,0.6); margin-top: 4px; }\n\n /* ── Item Style: hero ── */\n .aup-list-hero { position: relative; min-height: 200px; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--surface) 70%, var(--border)); display: flex; align-items: flex-end; }\n .aup-list-hero:hover { opacity: 0.95; }\n .aup-list-hero[data-selected=\"true\"] { outline: 3px solid var(--accent); outline-offset: -3px; }\n .aup-list-hero-content { width: 100%; padding: 20px 24px; background: linear-gradient(transparent 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.85)); }\n .aup-list-hero-title { font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }\n .aup-list-hero-desc { font-size: 13px; color: rgba(255,255,255,0.8); margin-top: 4px; }\n .aup-list-hero-footer { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 6px; }\n\n /* ── Item Style: card footer ── */\n .aup-list-card-footer { font-size: 11px; color: var(--dim); margin-top: 6px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent); }\n\n /* ── Shared sub-elements ── */\n .aup-list-icon { flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--dim); }\n .aup-list-icon .aup-icon-svg { width: 16px; height: 16px; }\n .aup-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }\n .aup-list-label { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .aup-list-desc { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .aup-list-badge { flex-shrink: 0; font-size: 11px; padding: 1px 6px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--dim) 15%, transparent); color: var(--dim); font-weight: 500; }\n .aup-list-chevron { flex-shrink: 0; width: 14px; font-size: 10px; color: var(--dim); user-select: none; }\n\n /* ── Grouped children ── */\n .aup-list-children { padding-left: 16px; display: none; border-left: 1px solid color-mix(in srgb, var(--border) 50%, transparent); margin-left: 6px; }\n .aup-list-children[data-expanded=\"true\"] { display: block; }\n\n /* ── Table layout ── */\n .aup-list-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n .aup-list-table th { text-align: left; padding: 6px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); }\n .aup-list-table td { padding: 5px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent); color: var(--text); }\n .aup-list-table-row { cursor: pointer; transition: background var(--transition); }\n .aup-list-table-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }\n .aup-list-table-row[data-selected=\"true\"] { background: color-mix(in srgb, var(--accent) 15%, transparent); }\n .aup-list-table-expand { cursor: pointer; user-select: none; }\n\n /* ── Kind-specific ── */\n .aup-list-dir .aup-list-icon { color: var(--accent); }\n .aup-list-file .aup-list-icon { color: var(--dim); }\n .aup-list-group { font-weight: 600; }\n .aup-list-group .aup-list-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dim); }\n .aup-list-group .aup-list-badge { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }\n\n /* Task status */\n .aup-list-task--ready .aup-list-badge { background: color-mix(in srgb, var(--success, #4ec9b0) 15%, transparent); color: var(--success, #4ec9b0); }\n .aup-list-task--in_progress .aup-list-badge { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }\n .aup-list-task--review .aup-list-badge { background: color-mix(in srgb, var(--assistant-color, #59c2ff) 15%, transparent); color: var(--assistant-color, #59c2ff); }\n .aup-list-task--blocked .aup-list-badge { background: color-mix(in srgb, var(--error, #ff6b6b) 15%, transparent); color: var(--error, #ff6b6b); }\n .aup-list-task--done .aup-list-badge { background: color-mix(in srgb, var(--dim) 10%, transparent); color: var(--dim); }\n .aup-list-task--done .aup-list-label { opacity: 0.6; }\n .aup-list-task--draft .aup-list-badge { background: color-mix(in srgb, var(--dim) 15%, transparent); color: var(--dim); }\n .aup-list-queue .aup-list-icon { color: var(--assistant-color, #59c2ff); }\n .aup-list-daemon .aup-list-icon { color: var(--success, #4ec9b0); }\n\n /* ════════════════════════════════════════════════════════\n WM — Window Manager (compositor layer)\n ════════════════════════════════════════════════════════ */\n\n /* ── WM Container ── */\n .wm-container {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 100vh;\n overflow: hidden;\n }\n\n /* ── WM Empty placeholder ── */\n .wm-empty {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n min-height: 200px;\n color: var(--dim);\n font-size: 0.9rem;\n }\n\n /* ── WM Surface ── */\n .wm-surface {\n background: var(--surface);\n border: var(--card-border);\n border-radius: var(--radius-md);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n .wm-surface[data-active=\"true\"] {\n box-shadow: 0 0 0 2px var(--accent);\n }\n\n .wm-surface-content {\n flex: 1;\n overflow: auto;\n position: relative;\n }\n\n /* ── Default Decorator: Title Bar ── */\n .wm-titlebar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 32px;\n padding: 0 8px;\n background: color-mix(in srgb, var(--bg) 90%, var(--accent) 10%);\n border-bottom: 1px solid var(--border);\n cursor: grab;\n user-select: none;\n -webkit-user-select: none;\n flex-shrink: 0;\n }\n .wm-titlebar:active { cursor: grabbing; }\n\n .wm-title-text {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--text);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .wm-close-btn {\n background: none;\n border: none;\n color: var(--dim);\n cursor: pointer;\n font-size: 0.8rem;\n padding: 2px 6px;\n border-radius: var(--radius-sm);\n line-height: 1;\n }\n .wm-close-btn:hover {\n background: var(--error);\n color: #fff;\n }\n\n /* ── Default Decorator: Resize Handle ── */\n .wm-resize-handle {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 16px;\n height: 16px;\n cursor: se-resize;\n }\n .wm-resize-handle::after {\n content: \"\";\n position: absolute;\n bottom: 3px;\n right: 3px;\n width: 8px;\n height: 8px;\n border-right: 2px solid var(--dim);\n border-bottom: 2px solid var(--dim);\n opacity: 0.4;\n }\n .wm-surface:hover .wm-resize-handle::after {\n opacity: 0.8;\n }\n\n /* ── Dock ── */\n .wm-dock {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n gap: 4px;\n padding: 4px 8px;\n background: color-mix(in srgb, var(--bg) 95%, transparent);\n border-top: 1px solid var(--border);\n overflow-x: auto;\n z-index: 9999;\n }\n\n .wm-dock-item {\n padding: 4px 12px;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n font-size: 0.7rem;\n color: var(--text);\n cursor: pointer;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n }\n .wm-dock-item:hover {\n background: var(--accent-bg);\n border-color: var(--accent);\n }\n\n /* ── Panels Strategy ── */\n .wm-panels {\n display: grid;\n width: 100%;\n height: 100%;\n /* grid-template-columns set dynamically by JS */\n /* grid-template-rows set dynamically by JS */\n gap: 0;\n background: var(--border);\n }\n\n .wm-panel {\n background: var(--bg);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n }\n\n /* Full-width rows: header, footer, statusbar, dock */\n .wm-panel[data-wm-position=\"header\"],\n .wm-panel[data-wm-position=\"footer\"],\n .wm-panel[data-wm-position=\"statusbar\"],\n .wm-panel[data-wm-position=\"dock\"] {\n grid-column: 1 / -1;\n }\n\n .wm-panel[data-wm-position=\"header\"] {\n border-bottom: 1px solid var(--border);\n padding: 6px 12px;\n }\n .wm-panel[data-wm-position=\"footer\"],\n .wm-panel[data-wm-position=\"statusbar\"] {\n border-top: 1px solid var(--border);\n padding: 4px 12px;\n font-size: 0.75rem;\n color: var(--dim);\n }\n .wm-panel[data-wm-position=\"dock\"] {\n border-top: 1px solid var(--border);\n padding: 4px 8px;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n }\n\n /* ── Panels Divider (draggable resize handle) ── */\n .wm-divider {\n width: 4px;\n cursor: col-resize;\n background: var(--border);\n transition: background 0.15s;\n flex-shrink: 0;\n position: relative;\n }\n .wm-divider:hover,\n .wm-divider.wm-divider-active {\n background: var(--accent);\n }\n .wm-divider::after {\n content: \"\";\n position: absolute;\n top: 0; bottom: 0;\n left: -4px; right: -4px;\n }\n\n /* ── Responsive: narrow viewport collapses to single-column ── */\n .wm-responsive-tabs {\n display: none;\n grid-column: 1 / -1;\n gap: 0;\n background: var(--surface);\n border-bottom: 1px solid var(--border);\n overflow-x: auto;\n flex-shrink: 0;\n }\n .wm-responsive-tab {\n padding: 6px 14px;\n font-size: 0.75rem;\n color: var(--dim);\n cursor: pointer;\n border-bottom: 2px solid transparent;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n }\n .wm-responsive-tab:hover { color: var(--text); }\n .wm-responsive-tab[data-active=\"true\"] {\n color: var(--accent);\n border-bottom-color: var(--accent);\n }\n\n @media (max-width: 768px) {\n .wm-panels {\n grid-template-columns: 1fr !important;\n }\n .wm-panels > .wm-divider { display: none; }\n .wm-panel[data-wm-responsive-hidden=\"true\"] { display: none !important; }\n .wm-responsive-tabs { display: flex; }\n }\n\n /* ── Tabs (Phase 3) ── */\n .wm-tabs {\n display: flex;\n gap: 0;\n background: var(--bg);\n border-bottom: 1px solid var(--border);\n overflow-x: auto;\n flex-shrink: 0;\n }\n\n .wm-tab {\n padding: 4px 12px;\n font-size: 0.7rem;\n color: var(--dim);\n cursor: pointer;\n border-bottom: 2px solid transparent;\n white-space: nowrap;\n user-select: none;\n -webkit-user-select: none;\n }\n .wm-tab:hover { color: var(--text); }\n .wm-tab[data-active=\"true\"],\n .wm-tab.wm-tab-active {\n color: var(--accent);\n border-bottom-color: var(--accent);\n }\n .wm-tab {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n .wm-tab-label {\n pointer-events: none;\n }\n .wm-tab-close {\n background: none;\n border: none;\n color: var(--dim);\n cursor: pointer;\n font-size: 0.6rem;\n padding: 0 2px;\n line-height: 1;\n opacity: 0;\n transition: opacity 0.15s;\n }\n .wm-tab:hover .wm-tab-close { opacity: 1; }\n .wm-tab-close:hover { color: var(--accent); }\n\n /* ── Overlay Layer (Phase 4) ── */\n .wm-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n z-index: 100;\n }\n .wm-overlay > * {\n pointer-events: auto;\n }\n`;\n\n/**\n * Deck-specific CSS injected into Shadow DOM root.\n * Isolated from the main page — design tokens don't leak out.\n */\nexport const DECK_SHADOW_CSS = `\n /* ── Deck Layout ── */\n .aup-deck { position: relative; width: 100%; overflow: hidden; background: var(--deck-bg, var(--bg)); border-radius: var(--radius-lg, 12px); outline: none; color: var(--deck-text, var(--text, #fff)); font-family: var(--deck-font-body, var(--font, system-ui)); isolation: isolate; }\n .aup-deck[data-aspect=\"16-9\"] { aspect-ratio: 16/9; }\n .aup-deck[data-aspect=\"4-3\"] { aspect-ratio: 4/3; }\n .aup-deck:fullscreen { border-radius: 0; }\n .aup-deck[data-presentation=\"true\"] { height: 100%; border-radius: 0; }\n .aup-deck[data-presentation=\"true\"] .aup-deck-viewport { height: 100%; min-height: 100vh; }\n .aup-deck[data-presentation=\"true\"] .aup-deck-slide > * { height: 100%; display: flex; flex-direction: column; justify-content: center; }\n .aup-deck[data-presentation=\"true\"] .aup-deck-slide .aup-frame { flex: 1; }\n .aup-deck[data-presentation=\"true\"] .aup-deck-slide { padding: 0; }\n .aup-deck[data-presentation=\"true\"] .aup-deck-slide .aup-frame iframe { width: 100%; height: 100%; }\n .aup-deck-viewport { position: relative; width: 100%; height: 100%; min-height: 300px; }\n .aup-deck[data-aspect=\"16-9\"] .aup-deck-viewport,\n .aup-deck[data-aspect=\"4-3\"] .aup-deck-viewport { min-height: 0; height: 100%; }\n .aup-deck-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--deck-slide-padding, 40px); opacity: 0; pointer-events: none; transition: opacity var(--deck-transition-duration, 600ms) ease, transform var(--deck-transition-duration, 600ms) ease; }\n .aup-deck-slide > * { width: 100%; max-width: 100%; }\n .aup-deck-slide.active { opacity: 1; pointer-events: auto; z-index: 1; transform: none; }\n\n /* Slide background — keep absolute positioning, just add isolation for ::before/::after */\n .aup-deck[data-slide-bg=\"gradient\"] .aup-deck-slide { background: var(--deck-gradient, linear-gradient(135deg, var(--deck-bg), var(--deck-surface))); }\n .aup-deck[data-slide-bg=\"dots\"] .aup-deck-slide::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--deck-text, #fff) 8%, transparent) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }\n .aup-deck[data-slide-bg=\"grid\"] .aup-deck-slide::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--deck-text, #fff) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--deck-text, #fff) 5%, transparent) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }\n .aup-deck[data-slide-bg=\"noise\"] .aup-deck-slide::after { content: ''; position: absolute; inset: 0; opacity: 0.03; background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\"); pointer-events: none; }\n .aup-deck[data-slide-bg=\"aurora\"] .aup-deck-slide::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 20% 30%, color-mix(in srgb, var(--deck-accent, #6366f1) 15%, transparent), transparent), radial-gradient(ellipse 50% 50% at 80% 60%, color-mix(in srgb, var(--deck-accent, #6366f1) 10%, transparent), transparent); animation: deck-aurora 8s ease-in-out infinite alternate; pointer-events: none; }\n @keyframes deck-aurora { from { opacity: 0.5; transform: scale(1) rotate(0deg); } to { opacity: 1; transform: scale(1.1) rotate(2deg); } }\n\n /* Fade transition (default) */\n .aup-deck[data-transition=\"fade\"] .aup-deck-slide.prev { opacity: 0; }\n /* Slide transition */\n .aup-deck[data-transition=\"slide\"] .aup-deck-slide { transform: translateX(100%); }\n .aup-deck[data-transition=\"slide\"] .aup-deck-slide.active { transform: translateX(0); }\n .aup-deck[data-transition=\"slide\"] .aup-deck-slide.prev { transform: translateX(-100%); opacity: 1; }\n /* Zoom transition */\n .aup-deck[data-transition=\"zoom\"] .aup-deck-slide { transform: scale(0.8); }\n .aup-deck[data-transition=\"zoom\"] .aup-deck-slide.active { transform: scale(1); }\n .aup-deck[data-transition=\"zoom\"] .aup-deck-slide.prev { transform: scale(1.2); opacity: 0; }\n /* None transition */\n .aup-deck[data-transition=\"none\"] .aup-deck-slide { transition: none; }\n\n /* Deck controls */\n .aup-deck-controls { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }\n .aup-deck-prev, .aup-deck-next { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--deck-bg, var(--bg)) 60%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--deck-text, var(--text)); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s, background 0.2s; }\n .aup-deck-prev svg, .aup-deck-next svg { width: 20px; height: 20px; }\n .aup-deck:hover .aup-deck-prev, .aup-deck:hover .aup-deck-next { opacity: 0.7; }\n .aup-deck-prev:hover, .aup-deck-next:hover { opacity: 1 !important; background: color-mix(in srgb, var(--deck-bg, var(--bg)) 80%, transparent); }\n\n /* Deck dots */\n .aup-deck-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 10px; }\n .aup-deck-dot { width: 12px; height: 12px; border-radius: 50%; border: none; background: color-mix(in srgb, var(--deck-text, var(--text)) 30%, transparent); cursor: pointer; padding: 0; transition: all 0.2s; }\n .aup-deck-dot.active { background: var(--deck-accent, var(--accent)); transform: scale(1.4); box-shadow: 0 0 8px var(--deck-accent-glow, var(--deck-accent, var(--accent))); }\n .aup-deck-dot:hover { background: color-mix(in srgb, var(--deck-text, var(--text)) 60%, transparent); }\n\n /* Deck progress bar */\n .aup-deck-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: color-mix(in srgb, var(--deck-text, var(--text)) 10%, transparent); z-index: 2; }\n .aup-deck-progress-fill { height: 100%; background: var(--deck-accent, var(--accent)); transition: width 0.3s ease; }\n\n /* Heading styles */\n .deck-heading-gradient h1, .deck-heading-gradient h2 { background: linear-gradient(135deg, var(--deck-text, #fff), var(--deck-accent, #6366f1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\n .deck-heading-glow h1, .deck-heading-glow h2 { text-shadow: 0 0 40px var(--deck-accent-glow, rgba(99,102,241,0.4)), 0 0 80px var(--deck-accent-glow, rgba(99,102,241,0.4)); }\n\n /* Card styles */\n .deck-card-glass .aup-view[data-mode=\"card\"] { background: color-mix(in srgb, var(--deck-surface, #141414) 60%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--deck-text, #fff) 10%, transparent); border-radius: 16px; }\n .deck-card-neon .aup-view[data-mode=\"card\"] { background: transparent; border: 1px solid var(--deck-accent, #6366f1); border-radius: 12px; box-shadow: 0 0 15px var(--deck-accent-glow, rgba(99,102,241,0.4)), inset 0 0 15px var(--deck-accent-glow, rgba(99,102,241,0.4)); }\n .deck-card-bordered .aup-view[data-mode=\"card\"] { background: transparent; border: 1px solid var(--deck-accent, #6366f1); border-radius: 12px; }\n\n /* Typography overrides */\n h1, h2, h3 { font-family: var(--deck-font-heading, var(--deck-font-body, inherit)); }\n h1 { font-size: var(--deck-heading-size, 3rem); }\n code, pre { font-family: var(--deck-font-mono, monospace); }\n\n /* Entrance animations (duplicated from main CSS for shadow isolation) */\n [data-animate] { opacity: 0; }\n [data-animate].aup-animated { animation-fill-mode: both; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }\n [data-animate=\"fade-in\"].aup-animated { animation-name: aup-fade-in; animation-duration: 600ms; }\n [data-animate=\"slide-up\"].aup-animated { animation-name: aup-slide-up; animation-duration: 700ms; }\n [data-animate=\"slide-down\"].aup-animated { animation-name: aup-slide-down; animation-duration: 700ms; }\n [data-animate=\"slide-left\"].aup-animated { animation-name: aup-slide-left; animation-duration: 700ms; }\n [data-animate=\"zoom-in\"].aup-animated { animation-name: aup-zoom-in; animation-duration: 600ms; }\n [data-animate=\"blur-in\"].aup-animated { animation-name: aup-blur-in; animation-duration: 800ms; }\n [data-animate=\"scale-card\"].aup-animated { animation-name: aup-scale-card; animation-duration: 500ms; }\n [data-animate=\"count-up\"].aup-animated { animation-name: aup-fade-in; animation-duration: 600ms; }\n @keyframes aup-fade-in { from { opacity: 0; } to { opacity: 1; } }\n @keyframes aup-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes aup-slide-down { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }\n @keyframes aup-slide-left { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }\n @keyframes aup-zoom-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }\n @keyframes aup-blur-in { from { opacity: 0; filter: blur(8px); transform: scale(0.97); } to { opacity: 1; filter: blur(0); transform: scale(1); } }\n @keyframes aup-scale-card { from { opacity: 0; transform: scale(0.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }\n\n /* ── AUP Scene Buffers (Stage-to-Live dual buffer) ── */\n .aup-buffer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: auto; }\n .aup-buffer.staged { visibility: hidden; pointer-events: none; }\n .aup-buffer.active { visibility: visible; }\n .aup-buffer-hidden { display: none; }\n @keyframes aup-scene-fade-in { from { opacity: 0; } to { opacity: 1; } }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAa,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6iDnB,MAAa,kBAAkB"}