:root{--violet: #7a4de7;--gold: #ffd34d;--ghost-blue: #a1e7f5;--deep-black: #0c0c0e;--fog: #b5b5b5;--keeper-bg: #2a2c34;--storyteller-bg: #1d1f24}body{margin:0;font-family:Lato,sans-serif;background-color:var(--deep-black);color:var(--fog);transition:background-color .5s ease,color .5s ease}.container{max-width:1200px;margin:0 auto;padding:2rem;text-align:center}.logo{max-width:180px;margin:1rem auto}.tagline{font-size:1.25rem;margin-bottom:1rem}.toggle-button{background:var(--violet);color:#fff;border:none;padding:.5rem 1.2rem;border-radius:5px;cursor:pointer;font-weight:700;margin-bottom:2rem}.dual-panels{display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap}.panel{flex:1;padding:2rem;border-radius:10px;transition:all .4s ease}.keeper{background:var(--keeper-bg);color:var(--ghost-blue)}.storyteller{background:var(--storyteller-bg);color:var(--gold)}.glow-button{margin-top:1rem;padding:.6rem 1.5rem;font-weight:700;color:var(--deep-black);background:var(--gold);border:none;border-radius:5px;cursor:pointer;box-shadow:0 0 10px var(--gold);transition:transform .2s ease}.glow-button:hover{transform:scale(1.05)}.mystic-mode body,.mystic-mode{background-color:#111118;color:var(--ghost-blue);font-family:Cormorant Garamond,serif}.mystic-mode .panel{box-shadow:0 0 20px #ffffff1a;background-image:radial-gradient(circle at center,rgba(122,77,231,.2),transparent);text-shadow:0 0 5px var(--violet)}.mystic-mode .glow-button{background:var(--ghost-blue);color:var(--deep-black);box-shadow:0 0 12px var(--ghost-blue)}footer{margin-top:4rem;font-size:.9rem;color:var(--fog)}html,body,#root{margin:0;padding:0;height:100%}*{box-sizing:border-box}