@theme{ --color-retro-bg: var(--retro-bg); --color-retro-surface: var(--retro-surface); --color-retro-card: var(--retro-card); --color-retro-text: var(--retro-text); --color-retro-border: var(--retro-border);  --color-retro-primary: var(--retro-primary); --color-retro-secondary: var(--retro-secondary); --color-retro-accent: var(--retro-accent); --color-retro-muted: var(--retro-muted);  --color-retro-green: var(--retro-green); --color-retro-green-hover: var(--retro-green-hover); --color-retro-cyan: var(--retro-cyan); --color-retro-red: var(--retro-red); --color-retro-gold: var(--retro-gold); --color-retro-purple: var(--retro-purple); --color-retro-pink: var(--retro-pink);  --font-pixel: "Press Start 2P", monospace; --font-sans: "Inter", sans-serif;  --shadow-retro: 4px 4px 0px 0px currentColor; --shadow-retro-hover: 2px 2px 0px 0px currentColor; --shadow-pixel: 4px 4px 0px 0px var(--retro-shadow-green); --shadow-pixel-lg: 6px 6px 0px 0px var(--retro-shadow-green-lg); --shadow-pixel-gold: 4px 4px 0px 0px var(--retro-shadow-gold);  --animate-float: float 3s ease-in-out infinite; --animate-pulse-slow: pulse 4s cubic-bezier(.4, 0, .6, 1) infinite; --animate-scanlines: scanlines 8s linear infinite; @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes scanlines { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }}@layer base{:root,:host{--retro-bg:#f2f0eb;--retro-surface:#e6e2dc;--retro-card:#dcd8d0;--retro-text:#1a1a2e;--retro-border:#bebaa2;--retro-primary:#4f46e5;--retro-secondary:#fbbf24;--retro-accent:#10b981;--retro-muted:#646478;--retro-green:#008c4b;--retro-green-hover:#006e3a;--retro-cyan:#24827a;--retro-red:#c83741;--retro-gold:#b48700;--retro-purple:#8237c8;--retro-pink:#c84678;--retro-shadow-green:#008c4b4d;--retro-shadow-green-lg:#008c4b33;--retro-shadow-gold:#b487004d}.dark{--retro-bg:#0a0a0f;--retro-surface:#12121a;--retro-card:#1a1a2e;--retro-border:#2a2a3e;--retro-text:#e8e6e3;--retro-primary:#818cf8;--retro-secondary:#fcd34d;--retro-accent:#34d399;--retro-muted:#88a;--retro-green:#0f8;--retro-green-hover:#00cc6a;--retro-cyan:#4ecdc4;--retro-red:#ff6b6b;--retro-gold:gold;--retro-purple:#a855f7;--retro-pink:#ff77a8;--retro-shadow-green:#00ff884d;--retro-shadow-green-lg:#0f83;--retro-shadow-gold:#ffd7004d;--color-retro-bg:#0a0a0f;--color-retro-surface:#12121a;--color-retro-card:#1a1a2e;--color-retro-text:#e8e6e3;--color-retro-border:#2a2a3e;--color-retro-primary:#818cf8;--color-retro-secondary:#fcd34d;--color-retro-accent:#34d399;--color-retro-muted:#88a;--color-retro-green:#0f8;--color-retro-green-hover:#00cc6a;--color-retro-cyan:#4ecdc4;--color-retro-red:#ff6b6b;--color-retro-gold:gold;--color-retro-purple:#a855f7;--color-retro-pink:#ff77a8}.light{--retro-bg:#f2f0eb;--retro-surface:#e6e2dc;--retro-card:#dcd8d0;--retro-text:#1a1a2e;--retro-border:#bebaa2;--retro-primary:#4f46e5;--retro-secondary:#fbbf24;--retro-accent:#10b981;--retro-muted:#646478;--retro-green:#008c4b;--retro-green-hover:#006e3a;--retro-cyan:#24827a;--retro-red:#c83741;--retro-gold:#b48700;--retro-purple:#8237c8;--retro-pink:#c84678;--retro-shadow-green:#008c4b4d;--retro-shadow-green-lg:#008c4b33;--retro-shadow-gold:#b487004d;--color-retro-bg:#f2f0eb;--color-retro-surface:#e6e2dc;--color-retro-card:#dcd8d0;--color-retro-text:#1a1a2e;--color-retro-border:#bebaa2;--color-retro-primary:#4f46e5;--color-retro-secondary:#fbbf24;--color-retro-accent:#10b981;--color-retro-muted:#646478;--color-retro-green:#008c4b;--color-retro-green-hover:#006e3a;--color-retro-cyan:#24827a;--color-retro-red:#c83741;--color-retro-gold:#b48700;--color-retro-purple:#8237c8;--color-retro-pink:#c84678}}@layer utilities{.pxl-corner-sm{clip-path:polygon(2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px),0 2px,2px 2px)}.pxl-corner-md{clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px),0 4px,2px 4px,2px 2px,4px 2px)}.pxl-corner-lg{clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 2px,calc(100% - 4px) 2px,calc(100% - 4px) 4px,calc(100% - 2px) 4px,calc(100% - 2px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 2px) calc(100% - 6px),calc(100% - 2px) calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) calc(100% - 2px),calc(100% - 6px) calc(100% - 2px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 2px),4px calc(100% - 2px),4px calc(100% - 4px),2px calc(100% - 4px),2px calc(100% - 6px),0 calc(100% - 6px),0 6px,2px 6px,2px 4px,4px 4px,4px 2px,6px 2px)}.pxl-shadow{filter:drop-shadow(3px 3px #00000040)}.pxl-shadow-hover:hover{filter:drop-shadow(2px 2px #00000040);transform:translate(1px,1px)}.pxl-shadow-active:active{filter:drop-shadow(1px 1px #00000040);transform:translate(2px,2px)}.pixel-corners{clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}.btn-retro{font-family:var(--font-pixel);letter-spacing:.05em;border-width:2px;padding:.75rem 1.5rem;transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);box-shadow:4px 4px}.btn-retro:hover{transform:translate(2px,2px);box-shadow:2px 2px}.btn-retro:active{transform:translate(4px,4px);box-shadow:0 0}.pixel-border{box-shadow:inset -4px -4px 0px 0px #0000004d, inset 4px 4px 0px 0px #ffffff1a, 0 0 0 2px var(--color-retro-border-base)}}