:root{--purple-gradient:linear-gradient(180deg,#fff 0%,#e0b0ff 40%,#9370db 100%);--bg-dark:#0a0a12}body,html{background-color:var(--bg-dark);width:100%;height:100%;margin:0;padding:0;font-family:Noto Serif SC,Cinzel,serif;overflow:hidden}.app-container{background:radial-gradient(circle,#1a1a2e 0%,#000 120%);width:100vw;height:100vh;position:relative}.app-container:after{content:"";pointer-events:none;z-index:10;background:radial-gradient(circle,#0000 50%,#000 100%);position:absolute;inset:0}.mystic-header{text-align:center;z-index:20;pointer-events:none;width:100%;position:absolute;top:15%;left:50%;transform:translate(-50%,-50%)}.art-title{letter-spacing:.4em;background:var(--purple-gradient);color:#0000;text-shadow:0 0 10px #fff6,0 0 20px #e0b0ff4d,0 0 40px #9370db80;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-family:Noto Serif SC,serif;font-size:2.5rem;font-weight:700;animation:5s ease-in-out infinite breathe}.art-sub{color:#d8bfd8;letter-spacing:.6em;text-transform:uppercase;text-shadow:0 0 10px #9370db80;opacity:.9;font-family:Cinzel,serif;font-size:.8rem}.interpretation-container{text-align:center;z-index:20;pointer-events:none;width:80%;position:absolute;bottom:25%;left:50%;transform:translate(-50%)}.card-name{color:#fff;letter-spacing:.2em;text-shadow:0 0 10px #fffc;opacity:0;margin-bottom:8px;font-family:Cinzel,serif;font-size:1.5rem;animation:.8s ease-out forwards fadeUp}.card-meaning{color:#e6e6fa;letter-spacing:.1em;text-shadow:0 2px 4px #000c;opacity:0;background:linear-gradient(90deg,#0000,#0009,#0000);padding:5px 20px;font-family:Noto Serif SC,serif;font-size:1.1rem;font-weight:300;animation:.8s ease-out .3s forwards fadeUp;display:inline-block}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes breathe{0%,to{filter:brightness()}50%{filter:brightness(120%)drop-shadow(0 0 10px #e0b0ff66)}}.hud-layer{pointer-events:none;z-index:20;position:absolute;inset:0}.camera-feed-hidden{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;top:-1000px;left:-1000px}.video-element,.canvas-overlay{object-fit:cover;width:100%;height:100%;position:absolute}.loading-text{color:#e0b0ff;letter-spacing:.2em;text-shadow:0 0 10px #9370dbcc;pointer-events:auto;font-family:Cinzel,serif;font-size:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.instructions-panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(90deg,#0f0f1ed9 0%,#32145033 100%);border-left:3px solid #9370db;border-radius:0 10px 10px 0;padding:20px 30px;position:absolute;bottom:40px;left:40px;box-shadow:0 10px 30px #0009}.instruction-item{opacity:.5;align-items:center;margin-bottom:12px;transition:all .4s;display:flex}.instruction-item.active{opacity:1;transform:translate(10px)scale(1.05)}.instruction-item.active .icon{text-shadow:0 0 15px #e0b0ff}.icon{text-align:center;color:#e0b0ff;width:30px;margin-right:15px;font-size:1.5rem}.label{color:#f0f0f0;font-family:Noto Serif SC;font-size:1rem}.desc{color:#b0b0d0;margin-top:2px;font-family:Cinzel;font-size:.65rem;display:block}.sound-toggle{cursor:pointer;z-index:50;pointer-events:auto;filter:drop-shadow(0 0 #e0b0ff00);background:0 0;border:none;align-items:center;gap:12px;padding:10px;transition:all .5s ease-out;display:flex;position:absolute;top:40px;left:40px}.sound-toggle:hover{filter:drop-shadow(0 0 8px #9370db99);transform:scale(1.05)}.sound-toggle.active{filter:drop-shadow(0 0 12px #e0b0ffcc)}.sound-toggle.active .mystic-pulse path{animation:3s ease-in-out infinite alternate pulseWave}@keyframes pulseWave{0%{opacity:.4;stroke-width:1px;transform:scale(.95)}to{opacity:1;stroke-width:1.5px;transform:scale(1.05)}}.sound-label{color:#d8bfd8;letter-spacing:.15em;text-shadow:0 0 5px #9370db80;white-space:nowrap;font-family:Cinzel,serif;font-size:.75rem}.fade-in{animation:.8s ease-out forwards fadeInOpacity}@keyframes fadeInOpacity{0%{opacity:0;transform:translate(-5px)}to{opacity:1;transform:translate(0)}}.sound-toggle:active{filter:drop-shadow(0 0 5px #e0b0ffe6);transform:scale(.95)}canvas{filter:drop-shadow(0 0 10px #8a2be299)}.info-toggle{cursor:pointer;z-index:50;filter:drop-shadow(0 0 5px #d4af3780);pointer-events:auto;background:0 0;border:none;padding:10px;transition:transform .3s;position:absolute;top:40px;right:40px}.info-toggle:hover{filter:drop-shadow(0 0 10px #d4af37e6);transform:scale(1.1)rotate(90deg)}.modal-overlay{z-index:999;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;background:#0a0a0fb3;justify-content:center;align-items:center;transition:opacity .4s;display:flex;position:fixed;inset:0}.modal-overlay.open{opacity:1;pointer-events:auto}.modal-content{text-align:center;color:#fff;background:linear-gradient(145deg,#141423fa,#0a0a0ffc);border:1px solid #9370db4d;border-radius:8px;width:90%;max-width:420px;padding:40px 30px;transition:transform .4s cubic-bezier(.2,.8,.2,1);transform:translateY(20px);box-shadow:0 20px 50px #000c,0 0 30px #9370db26}.modal-overlay.open .modal-content{transform:translateY(0)}.modal-header-line{background:#d4af37;width:40px;height:3px;margin:0 auto 20px;box-shadow:0 0 10px #d4af37}.modal-title{color:#e0b0ff;text-shadow:0 0 10px #9370db80;margin:0;font-family:Noto Serif SC,serif;font-size:1.8rem}.modal-subtitle{color:#8a779d;letter-spacing:.3em;border-bottom:1px solid #ffffff1a;margin-bottom:30px;padding-bottom:15px;font-family:Cinzel,serif;font-size:.7rem}.modal-body{color:#ccc;text-align:left;font-family:Noto Serif SC,serif;line-height:1.6}.section{margin-bottom:25px}.section h3{color:#d4af37;margin-bottom:8px;font-size:1rem;font-weight:400}.steps span{color:#b0b0c0;margin-bottom:5px;font-size:.9rem;display:block}.steps b{color:#e0b0ff;font-weight:400}.highlight-box{background:#ffffff0d;border-left:3px solid #d4af37;border-radius:4px;margin-top:30px;padding:15px}.quote{color:#e8deca;margin:0 0 10px;font-size:.95rem;font-style:italic}.creator-signature{border-top:1px solid #ffffff1a;flex-direction:column;align-items:center;gap:8px;margin-top:35px;padding-top:20px;display:flex}.creator-label{letter-spacing:.2em;color:#8a779d;text-transform:uppercase;font-family:Cinzel,serif;font-size:.7rem}.creator-name{color:#d4af37;letter-spacing:.3em;text-shadow:0 0 10px #d4af3780;padding:0 10px;font-family:Noto Serif SC,serif;font-size:1.3rem;font-weight:700;position:relative}.creator-name:before,.creator-name:after{content:"✦";color:#e0b0ff;opacity:.6;font-size:.8rem;position:absolute;top:50%;transform:translateY(-50%)}.creator-name:before{left:-15px}.creator-name:after{right:-15px}.modal-close-btn{color:#e0b0ff;letter-spacing:.2em;cursor:pointer;background:0 0;border:1px solid #9370db80;margin-top:20px;padding:10px 30px;font-family:Cinzel,serif;font-size:1rem;transition:all .3s}.modal-close-btn:hover{background:#9370db1a;border-color:#e0b0ff;box-shadow:0 0 15px #9370db66}.mode-switch{color:#d4af37;letter-spacing:.1em;cursor:pointer;z-index:50;pointer-events:auto;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#141423cc;border:1px solid #d4af37;border-radius:30px;padding:12px 30px;font-family:Noto Serif SC,serif;font-size:1rem;transition:all .3s;position:absolute;bottom:40px;left:50%;transform:translate(-50%);box-shadow:0 0 15px #d4af3733}.mode-switch:hover{color:#1a1a2e;background:#d4af37;transform:translate(-50%)scale(1.05);box-shadow:0 0 25px #d4af3799}.mode-switch-container{z-index:50;pointer-events:auto;gap:20px;display:flex;position:absolute;bottom:40px;left:50%;transform:translate(-50%)}.mode-btn{color:#8a779d;letter-spacing:.1em;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-transform:uppercase;background:#14142399;border:1px solid #d4af3766;border-radius:4px;padding:10px 24px;font-family:Noto Serif SC,serif;font-size:.9rem;transition:all .3s}.mode-btn:hover{color:#d4af37;border-color:#d4af37;box-shadow:0 0 10px #d4af3733}.mode-btn.active{color:#d4af37;background:#d4af3726;border-color:#d4af37;transform:scale(1.05);box-shadow:0 0 15px #d4af3766}@keyframes breathe-glow{0%,to{opacity:.3;filter:blur(2px);text-shadow:0 0 5px #e0b0ff33;transform:scale(.98)}50%{opacity:1;filter:blur();text-shadow:0 0 25px #e0b0ffe6,0 0 50px #9370db99;transform:scale(1.02)}}.shuffling-overlay{text-align:center;z-index:60;pointer-events:none;width:100%;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}.meditation-text{color:#e0b0ff;letter-spacing:.4em;font-family:Noto Serif SC,serif;font-size:2.2rem;font-weight:300;animation:2.5s ease-in-out infinite breathe-glow}.reshuffle-btn{color:gold;letter-spacing:.1em;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#140a1e66;border:1px solid #ffd7004d;border-radius:4px;align-items:center;gap:8px;margin-left:15px;padding:10px 20px;font-family:Noto Serif SC,serif;font-size:.9rem;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.reshuffle-btn:hover:not(:disabled){text-shadow:0 0 8px #ffd70099;background:#ffd7001a;border-color:gold;transform:translateY(-1px);box-shadow:0 0 20px #ffd70040}.reshuffle-btn:active:not(:disabled){transform:translateY(1px)}.reshuffle-btn:disabled{opacity:.4;cursor:wait;filter:grayscale(.8);border-color:#0000}.reshuffle-btn svg{width:16px;height:16px;transition:transform .5s}.reshuffle-btn:hover:not(:disabled) svg{transform:rotate(180deg)}