@layer base{:root{--font-heading:"Outfit", sans-serif;--font-body:"Plus Jakarta Sans", sans-serif}}body.theme-obsidian{--bg-primary:#070913;--bg-secondary:#0d1224;--bg-card:#1118308c;--bg-card-hover:#1a2446b3;--border-subtle:#6366f129;--border-active:#818cf873;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent:#6366f1;--accent-glow:#6366f159;--accent-secondary:#8b5cf6;--badge-bg:#6366f126;--nav-bg:#090c1ad1}body.theme-emerald{--bg-primary:#04100c;--bg-secondary:#081d16;--bg-card:#0a231b8c;--bg-card-hover:#0f3428b3;--border-subtle:#10b98129;--border-active:#34d39973;--text-primary:#f0fdf4;--text-secondary:#a7f3d0;--text-muted:#4ade80;--accent:#10b981;--accent-glow:#10b98159;--accent-secondary:#06b6d4;--badge-bg:#10b98126;--nav-bg:#04100cd9}body.theme-amber{--bg-primary:#0e0a05;--bg-secondary:#1a1309;--bg-card:#261a0a8c;--bg-card-hover:#36260eb3;--border-subtle:#f59e0b2e;--border-active:#fbbf2473;--text-primary:#fffbeb;--text-secondary:#fde68a;--text-muted:#b45309;--accent:#f59e0b;--accent-glow:#f59e0b59;--accent-secondary:#f97316;--badge-bg:#f59e0b26;--nav-bg:#0e0a05d9}body.theme-ruby{--bg-primary:#0f050b;--bg-secondary:#1e0b16;--bg-card:#2c0e208c;--bg-card-hover:#40142fb3;--border-subtle:#ec48992e;--border-active:#f472b673;--text-primary:#fdf2f8;--text-secondary:#fbcfe8;--text-muted:#9d174d;--accent:#ec4899;--accent-glow:#ec489959;--accent-secondary:#f43f5e;--badge-bg:#ec489926;--nav-bg:#0f050bd9}body.theme-light{--bg-primary:#f8fafc;--bg-secondary:#eef2f6;--bg-card:#ffffffe0;--bg-card-hover:#fff;--border-subtle:#cbd5e1cc;--border-active:#6366f199;--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--accent:#4f46e5;--accent-glow:#4f46e540;--accent-secondary:#7c3aed;--badge-bg:#4f46e514;--nav-bg:#ffffffeb}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5;transition:background-color .4s,color .4s;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.025em}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:1.5rem;transition:all .3s cubic-bezier(.16,1,.3,1)}.glass-card:hover{border-color:var(--border-active);background:var(--bg-card-hover);box-shadow:0 16px 40px -12px var(--accent-glow);transform:translateY(-2px)}.glass-card-interactive{cursor:pointer}.glass-card-interactive:active{transform:scale(.985)}.glass-nav{background:var(--nav-bg);-webkit-backdrop-filter:blur(24px);border-right:1px solid var(--border-subtle)}.glass-modal{background:var(--bg-card);-webkit-backdrop-filter:blur(32px);border:1px solid var(--border-active);box-shadow:0 25px 50px -12px #0009, 0 0 50px -10px var(--accent-glow)}.accent-btn{background:linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);color:#fff;cursor:pointer;box-shadow:0 8px 25px -6px var(--accent-glow);font-weight:700;font-family:var(--font-heading);border:none;border-radius:1rem;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;transition:all .25s;display:inline-flex}.accent-btn:hover{box-shadow:0 14px 30px -4px var(--accent-glow);transform:translateY(-2px)scale(1.02)}.accent-btn:active{transform:scale(.97)}.secondary-btn{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-subtle);cursor:pointer;border-radius:1rem;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-weight:600;transition:all .2s;display:inline-flex}.secondary-btn:hover{border-color:var(--border-active);background:var(--bg-card-hover);color:var(--accent)}.input-field{background:var(--bg-secondary);border:1px solid var(--border-subtle);width:100%;color:var(--text-primary);font-size:.95rem;font-family:var(--font-body);border-radius:1rem;outline:none;padding:.85rem 1.25rem;transition:all .2s}.input-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.glow-orb{pointer-events:none;filter:blur(100px);opacity:.4;z-index:0;border-radius:50%;animation:8s ease-in-out infinite alternate pulse-slow;position:absolute}@keyframes pulse-slow{0%{opacity:.3;transform:scale(.9)translate(0)}to{opacity:.5;transform:scale(1.15)translate(20px,-20px)}}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:9999px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}.app-container{background-color:var(--bg-primary);min-height:100vh;display:flex;position:relative}.main-content{z-index:10;flex:1;width:100%;max-width:1440px;margin:0 auto;padding:1.5rem 2rem;transition:padding .25s;position:relative}@media (width<=1400px){.main-content{max-width:100%;padding:1.25rem 1.5rem}}@media (width<=1024px){.main-content{padding:1rem 1rem 6rem}}.interactive-table-row{transition:background-color .15s}.interactive-table-row:hover{background-color:#ffffff09}.grid-cell-box{transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s;position:relative}.grid-cell-box:hover{z-index:5;transform:scale(1.18)}.kbd-badge{min-width:22px;height:22px;font-size:.72rem;font-weight:800;font-family:var(--font-heading), monospace;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:.4rem;justify-content:center;align-items:center;padding:0 .4rem;display:inline-flex;box-shadow:0 2px 4px #00000040}.confetti-canvas{pointer-events:none;z-index:99999;width:100%;height:100%;position:fixed;top:0;left:0}.water-wave{pointer-events:none;background:#0ea5e9bf;border-radius:40%;width:200%;height:200%;transition:top 1s ease-out;animation:6s linear infinite wave-motion;position:absolute;top:-140%;left:-50%}.water-wave:nth-child(2){background:#38bdf880;animation:9s linear infinite wave-motion;top:-145%}@keyframes wave-motion{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.golden-glow-bottle{transition:box-shadow .8s,border-color .8s}.golden-glow-bottle.active{border-color:#38bdf8b3!important;box-shadow:0 0 60px 15px #0ea5e959!important}
