body { display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; }
.bg-animation { z-index: 0; }
.landing { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 20px; text-align: center; }
.landing-header h2 { font-size: 1.9rem; font-weight: 300; margin: 0 0 6px; letter-spacing: 2px; }
.landing-header p { margin: 0; opacity: 0.5; font-size: 0.88rem; letter-spacing: 0.5px; }
.mode-row, .cloak-row { display: flex; gap: 10px; }
.mode-card, .cloak-card { display: flex; flex-direction: column; align-items: center; cursor: pointer; border-radius: 12px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); transition: background .2s, border-color .2s, transform .15s; user-select: none; }
.mode-card { gap: 8px; padding: 14px 22px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); font-size: .82rem; color: rgba(255,255,255,.7); min-width: 100px; }
.mode-card .material-symbols-outlined, .cloak-card .material-symbols-outlined { padding: 0 !important; border-radius: 0 !important; transform: none !important; background: transparent !important; cursor: pointer !important; transition: color .2s !important; }
.mode-card .material-symbols-outlined { font-size: 26px; color: rgba(255,255,255,.7); }
.mode-card:hover, .cloak-card:hover { background: rgba(255,255,255,.09); border-color: transparent; transform: translateY(-2px); }
.mode-card.selected { border-color: transparent; background: rgba(255,255,255,.12); color: #fff; }
.mode-card.selected .material-symbols-outlined, .cloak-card:hover .material-symbols-outlined { color: #fff !important; }
.mode-card, .cloak-card { position: relative; }
.mode-card::before, .cloak-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--rainbow); pointer-events: none; opacity: 0; transition: opacity .2s; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.mode-card:hover::before, .mode-card.selected::before, .cloak-card:hover::before { opacity: 1; }
.divider { width: 260px; height: 1px; background: rgba(255,255,255,.1); }
.cloak-row { flex-wrap: wrap; justify-content: center; }
.cloak-card { gap: 6px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); font-size: .8rem; color: rgba(255,255,255,.65); min-width: 90px; }
.cloak-card .material-symbols-outlined { font-size: 24px; color: rgba(255,255,255,.65); }
.cloak-card:hover { color: #fff; }
.cloak-card:active { transform: translateY(0); }