:root{--midnight:#010103;--ultraviolet:#a855f7;--text-main:#fff;--text-sub:#fff9}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--midnight);color:var(--text-main);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:Inter,system-ui,-apple-system,sans-serif;overflow:hidden}.text-sub{color:var(--text-sub)}.bg-midnight{background-color:var(--midnight)}.bg-ultraviolet{background-color:var(--ultraviolet)}.text-primary{color:var(--ultraviolet)}@keyframes pulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.animate-pulse-aura{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}.gradient-overlay{background:linear-gradient(#0000,#0d0d15f2)}:root{--midnight:#010103;--onyx-black:#040408;--gem-glint:#a855f766;--ultraviolet:#a855f7;--violet-light:#e9d5ff;--violet-deep:#020205;--pure-obsidian:#000;--text-main:#fff;--text-sub:#ffffff73;--vibe-glow:var(--ultraviolet);--pulse-duration:4s}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;margin:0;padding:0}body{background-color:var(--midnight);color:var(--text-main);width:100vw;height:100vh;font-family:Outfit,Inter,sans-serif;overflow:hidden}#root{width:100%;height:100%}.onyx-app{flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.ambient-background{background:radial-gradient(circle at 50% 110%, var(--vibe-glow) 0%, transparent 60%);opacity:calc(.1 + (var(--resonance-lvl,0) * .15));filter:blur(100px);z-index:0;pointer-events:none;transition:background 1.5s ease-in-out,opacity 1s;position:absolute;inset:-20%}@keyframes bio-pulse{0%,to{opacity:.1;transform:scale(1)}50%{opacity:.25;transform:scale(1.1)}}.ambient-background:after{content:"";background:radial-gradient(circle at 50% 50%, var(--vibe-glow) 0%, transparent 50%);animation:bio-pulse var(--pulse-duration) ease-in-out infinite;position:absolute;inset:0}.glass{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#ffffff0f;border:1px solid #ffffff1a}.glass-heavy{-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background:#040408d9;border:1px solid #a855f726}.onyx-logo-container{flex-direction:column;align-items:center;gap:20px;display:flex}.onyx-vivid-logo{width:100px;height:100px;position:relative}.onyx-svg-main{width:100%;height:100%;filter:drop-shadow(0 0 15px var(--onyx-dim));animation:3s ease-in-out infinite logo-vivid-float}.onyx-diamond-path{fill:url(#onyx-grad);stroke:#b388ff33;stroke-width:1px}.onyx-diamond-shine-silhouette{fill:var(--violet-light);opacity:.8;filter:drop-shadow(0 0 12px #b388ff4d);animation:3s ease-in-out infinite alternate silhouette-shimmer}.onyx-svg-external{filter:drop-shadow(0 0 25px #8a3ffc66);width:100%;height:100%;animation:3s ease-in-out infinite logo-vivid-float}@keyframes silhouette-shimmer{0%{opacity:.4;filter:blur(1px)drop-shadow(0 0 5px #fff)}to{opacity:.8;filter:blur()drop-shadow(0 0 15px #fff)}}.onyx-core-glow{fill:#fff;filter:blur(10px);opacity:.4;animation:1.5s ease-in-out infinite alternate core-pulse}@keyframes logo-vivid-float{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-10px)scale(1.05)}}@keyframes diamond-shine{0%,to{opacity:.2}50%{opacity:.7}}@keyframes core-pulse{0%{opacity:.2;transform:scale(.8)}to{opacity:.6;transform:scale(1.2)}}.tiny-onyx-svg{width:24px;height:24px;filter:drop-shadow(0 0 5px var(--ultraviolet));margin-right:8px}.onyx-loading-screen{background:var(--midnight);z-index:9999;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-bar-minimal{background:#ffffff0d;border-radius:2px;width:120px;height:2px;position:relative;overflow:hidden}.loading-progress-line{background:var(--ultraviolet);width:30%;height:100%;animation:1.5s ease-in-out infinite loading-slide;position:absolute}@keyframes loading-slide{0%{transform:translate(-150%)}to{transform:translate(450%)}}.logo-text-onyx{letter-spacing:.5em;opacity:.6;margin-top:10px;font-family:Outfit,sans-serif;font-size:14px}.immersive-container{flex:1;width:100%;height:100%;position:relative}.content-stage{z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-viewport{z-index:1;background:#000;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.video-viewport:before{content:"";background:var(--poster-url) center/cover no-repeat;filter:blur(30px)brightness(.4);opacity:.6;z-index:0;position:absolute;inset:-20px}.aura-video-source{object-fit:contain;z-index:1;filter:saturate(1.1);width:100%;height:100%;position:relative}.vibe-pulse{border:4px solid;border-radius:50%;justify-content:center;align-items:center;width:140px;height:140px;transition:all .5s cubic-bezier(.175,.885,.32,1.275);animation:3s infinite alternate vibe-breath;display:flex}.resonance-ring.unlocked{box-shadow:0 0 80px var(--vibe-glow);border-width:6px;transform:scale(1.3)}@keyframes vibe-breath{0%{opacity:.5;box-shadow:0 0 20px var(--vibe-glow);transform:scale(.95)}to{opacity:.9;box-shadow:0 0 40px var(--vibe-glow);transform:scale(1.05)}}.unlock-celebration{text-align:center;width:100%;animation:.5s cubic-bezier(.175,.885,.32,1.275) pop-in;position:absolute;bottom:30%}.unlock-celebration p{color:var(--ultraviolet);text-shadow:0 0 20px var(--gem-glint);letter-spacing:.2em;font-size:1.2rem;font-weight:900}.sparks-overlay{pointer-events:none;z-index:20;position:absolute;inset:0;overflow:hidden}.spark-msg{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;background:#ffffff14;border-radius:2rem;align-items:center;gap:.5rem;padding:.4rem .8rem;font-size:.7rem;font-weight:600;animation:4s linear forwards spark-travel;display:flex;position:absolute;right:-200px}@keyframes spark-travel{0%{opacity:0;right:-200px}10%{opacity:1}90%{opacity:1}to{opacity:0;right:120%}}.interaction-layer{z-index:10;pointer-events:auto;flex-direction:column;gap:20px;padding:0 20px;display:flex;position:absolute;bottom:0;left:0;right:0}.interaction-layer>*{pointer-events:auto}.thumb-info{justify-content:space-between;align-items:flex-end;margin-bottom:1rem;display:flex}.title-glow{background:linear-gradient(#fff,#999);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.8rem;font-family:Outfit,sans-serif;font-size:1rem;font-weight:900;line-height:1}.tag-row{gap:.6rem;display:flex}.glass-tag{text-transform:uppercase;color:var(--text-sub);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:.5rem;padding:.3rem .6rem;font-size:.6rem;font-weight:700}.vertical-actions{flex-direction:column;align-items:center;gap:1.5rem;display:flex}.action-item{flex-direction:column;align-items:center;gap:.4rem;display:flex}.btn-circle{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0f;border:none;border-radius:50%;justify-content:center;align-items:center;width:3.5rem;height:3.5rem;transition:transform .2s cubic-bezier(.175,.885,.32,1.275);display:flex}.btn-circle:active{background:#fff3;transform:scale(.8)}.btn-circle.active-synergy{border-color:var(--ultraviolet);box-shadow:0 0 15px var(--gem-glint);transform:scale(1.1)}.btn-circle.active-connect{border-color:var(--ultraviolet);box-shadow:0 0 15px var(--gem-glint)}.btn-circle.active-vault{border-color:gold;box-shadow:0 0 15px #ffd70033}.action-label{color:var(--text-sub);text-transform:uppercase;font-size:.6rem;font-weight:800}.resonance-bar{align-items:center;width:100%;height:32px;padding:0 10px;display:flex;position:relative}.progress-track{background:#04040899;border:1px solid #ffffff0a;border-radius:20px;width:100%;height:4px;position:relative;box-shadow:inset 0 1px 2px #000c}.onyx-seeker{opacity:0;z-index:10;cursor:pointer;appearance:none;width:100%;height:40px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.onyx-seeker::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:40px}.progress-fill{background:linear-gradient(90deg, var(--violet-deep), var(--ultraviolet) 80%, var(--violet-light));height:100%;box-shadow:0 0 12px var(--gem-glint);border-radius:20px;transition:width .1s linear;position:relative}.progress-fill:after{content:"";width:10px;height:10px;box-shadow:0 0 15px #fff, 0 0 5px var(--ultraviolet);border:2px solid var(--ultraviolet);background:#fff;border-radius:50%;position:absolute;top:50%;right:-4px;transform:translateY(-50%)}.bottom-nav{background:var(--midnight);height:5.5rem;padding-bottom:env(safe-area-inset-bottom,.5rem);z-index:100;border-top:1px solid #ffffff0d;justify-content:space-around;align-items:center;display:flex}.nav-item{color:var(--text-sub);flex-direction:column;align-items:center;gap:.4rem;transition:all .3s;display:flex;position:relative}.nav-item span{text-transform:uppercase;font-size:.65rem;font-weight:700}.nav-item.active{color:var(--ultraviolet)}.nav-badge{background:var(--ultraviolet);color:#fff;width:14px;height:14px;box-shadow:0 0 10px var(--gem-glint);border-radius:50%;justify-content:center;align-items:center;font-size:.55rem;font-weight:900;display:flex;position:absolute;top:-5px;right:-8px}.screen-container{z-index:40;padding:40px 20px 100px;position:absolute;inset:0;overflow-y:auto}.screen-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.screen-header h2{letter-spacing:-.02em;font-size:1.5rem;font-weight:800}.search-box{border-radius:12px;align-items:center;gap:12px;margin-bottom:20px;padding:12px 15px;display:flex}.search-box input{color:#fff;background:0 0;border:none;outline:none;width:100%;font-size:.9rem;font-weight:600}.search-box input::placeholder{color:var(--text-sub)}.shard-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.shard-card{border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.shard-card img{aspect-ratio:16/9;object-fit:cover;width:100%}.shard-info{flex-direction:column;gap:4px;padding:10px;display:flex}.shard-info span{font-size:.75rem;font-weight:700}.shard-info small{color:var(--text-sub);font-size:.6rem}.profile-hero{flex-direction:column;align-items:center;gap:15px;margin-bottom:30px;display:flex}.avatar-pulse{background:linear-gradient(45deg, var(--ultraviolet), var(--violet-light));width:80px;height:80px;box-shadow:0 0 30px var(--vibe-glow);border-radius:50%;position:relative}.level-badge{background:var(--ultraviolet);color:#000;border-radius:20px;padding:4px 12px;font-size:.7rem;font-weight:900}.stat-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:30px;display:grid}.stat-card{text-transform:uppercase;border-radius:12px;flex-direction:column;align-items:center;gap:6px;padding:12px;font-size:.6rem;font-weight:800;display:flex}.btn-tiny{text-transform:uppercase;color:var(--text-sub);cursor:pointer;border:1px solid #ffffff1a;border-radius:6px;padding:4px 10px;font-size:.65rem;font-weight:800}.btn-tiny:active{background:#ffffff1a;transform:scale(.95)}.fake-content{border:1px solid #ffffff0d;border-radius:20px;flex-direction:column;gap:20px;width:100%;max-width:320px;padding:25px;display:flex}.camo-header{align-items:center;gap:12px;display:flex}.camo-header h1{letter-spacing:-.5px;flex:1;font-size:1.1rem;font-weight:800}.status-dot{background:var(--ultraviolet);width:8px;height:8px;box-shadow:0 0 10px var(--gem-glint);border-radius:50%}.camo-bar-container{background:#ffffff0d;border-radius:2px;height:4px;margin-top:8px;overflow:hidden}.camo-bar{background:linear-gradient(90deg, var(--ultraviolet), var(--violet-deep));height:100%;transition:width .3s}.camo-logs{background:#0000004d;border:1px solid #ffffff05;border-radius:12px;flex-direction:column;gap:4px;height:150px;padding:12px;font-family:Courier New,Courier,monospace;font-size:.65rem;display:flex;overflow:hidden}.log-line{color:#666;gap:8px;display:flex}.log-time{color:var(--primary);opacity:.6}.discreet-exit{color:#444;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:8px;margin-top:10px;padding:8px;font-size:.65rem;font-weight:800}.discreet-exit:active{background:#ffffff0d}.loader-mini{border:2px solid #ffffff1a;border-top-color:var(--ultraviolet);border-radius:50%;width:12px;height:12px;animation:1s linear infinite spin}.camo-footer{color:#555;align-items:center;gap:10px;font-size:.65rem;font-weight:600;display:flex}.setting-list{flex-direction:column;gap:10px;display:flex}.setting-item{border-radius:12px;justify-content:space-between;align-items:center;padding:15px;display:flex}.toggle{background:#ffffff1a;border-radius:20px;width:40px;height:20px;transition:all .3s;position:relative}.toggle.active{background:var(--ultraviolet)}.toggle:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:all .3s;position:absolute;top:2px;left:2px}.toggle.active:after{left:22px}.camouflage-overlay{z-index:1000;background:#111;justify-content:center;align-items:center;padding:40px;display:flex;position:fixed;inset:0}.fake-content{text-align:left;border-left:2px solid #333;padding-left:20px}.fake-content h1{color:#0f0;margin-bottom:10px;font-family:monospace;font-size:1.2rem}.fake-content p{color:#666;font-family:monospace;font-size:.8rem}.loader{background:#222;width:100px;height:2px;margin-top:20px;position:relative;overflow:hidden}.loader:after{content:"";background:#0f0;width:30%;height:100%;animation:2s infinite load;position:absolute;top:0;left:0}@keyframes load{0%{left:-30%}to{left:100%}}@keyframes animate-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s forwards animate-fade-in}.empty-state{color:var(--text-sub);flex-direction:column;justify-content:center;align-items:center;gap:20px;padding-top:50px;display:flex}.btn-action{color:#fff;cursor:pointer;border:1px solid #fff3;border-radius:30px;padding:12px 24px;font-weight:700}.filter-system{flex-direction:column;gap:15px;margin-bottom:25px;display:flex}.filter-group{flex-direction:column;gap:8px;display:flex}.filter-label{color:var(--text-sub);text-transform:uppercase;letter-spacing:.05em;margin-left:2px;font-size:.65rem;font-weight:800}.chip-row{-ms-overflow-style:none;scrollbar-width:none;gap:8px;padding-bottom:5px;display:flex;overflow-x:auto}.chip-row::-webkit-scrollbar{display:none}.chip{white-space:nowrap;color:var(--text-main);cursor:pointer;border:1px solid #ffffff1a;border-radius:20px;padding:6px 14px;font-size:.75rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1)}.chip.active{background:var(--ultraviolet);color:#000;border-color:var(--ultraviolet);box-shadow:0 0 15px var(--gem-glint)}.chip:active{transform:scale(.95)}