Use the uploaded screenshot as visual reference for style (overall mood only; do not copy any logos or exact UI assets). Build a Tailwind CSS design system + reusable components for a “space MMO desktop” UI. Goal - Create a reusable Window component system for a single-page app with floating panels: draggable title bar, resizable edges/corners, focus glow, and window controls. - Everything should be themeable via CSS variables. Global theming (CSS variables) - Define CSS variables on :root (and optionally a .theme-default class): --bg, --panel-bg, --panel-bg-2, --panel-border, --panel-highlight, --text, --text-muted, --accent, --accent-2, --danger, --shadow, --blur, --panel-opacity. - Default palette: near-black/charcoal base, muted grey text, gold/yellow accent, occasional green highlight. - Use variables throughout all components; avoid hardcoding colors except in variable definitions. Base layout primitives - DesktopRoot: full-viewport container with background image placeholder + vignette + subtle noise overlay. - LeftDock: fixed vertical dock (full height), ~80px width, designed to hold 64x64 icon buttons. Reusable components to create 1) WindowShell - Visual: dark translucent panel, thin 1px border, subtle inner highlight, soft shadow. - Structure: - TitleBar: left area (title + optional icon), center area (optional tabs), right area (buttons). - Body: content container with padding and scroll region. - StatusBar (optional): small footer for hints/status. - States: default, hover, focused/active (slight glow), inactive (reduced contrast), disabled. - Provide class hooks for “isActive”, “isPinned”, “isFullscreen”. 2) WindowControls - Buttons: minimize, maximize/fullscreen toggle, close. - Placeholder icons only (no copyrighted icons), consistent line weight. 3) Tabs - Compact sci-fi tab style matching the screenshot vibe: subtle separators, active underline/glow. 4) IconButton64 - 64x64 square hit target; supports active indicator, tooltip, hover glow. 5) Resize handles + cursor styles - Show visible resize affordance corners/edges. - Set cursor styles for title bar drag and each resize direction. - Include a subtle cursor glow effect (CSS only placeholder). Output - Produce a component showcase page section (still within the same single page) that displays: - One WindowShell in normal state, - One focused WindowShell, - One pinned WindowShell, - One fullscreen WindowShell mock (visual only), - LeftDock with ~10 placeholder icons.