:root{--bg-color: #020205;--accent-color: #00f2ff;--accent-secondary: #7000ff;--accent-tertiary: #ff00c8;--text-color: #ffffff;--glass-bg: rgba(10, 10, 20, .6);--glass-border: rgba(255, 255, 255, .08);--font-family: "Inter", "Orbitron", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);background-image:radial-gradient(circle at 50% 50%,rgba(112,0,255,.05) 0%,transparent 50%),radial-gradient(circle at 0% 0%,rgba(0,242,255,.03) 0%,transparent 40%);color:var(--text-color);font-family:var(--font-family);overflow:hidden;-webkit-font-smoothing:antialiased}#root{width:100vw;height:100vh}.app-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:radial-gradient(circle at center,transparent 0%,rgba(0,0,0,.4) 100%)}.canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;padding:2.5rem;display:grid;grid-template-areas:"header . controls" ". . ." ". . analysis";grid-template-columns:1fr 1fr auto;grid-template-rows:auto 1fr auto;animation:fadeIn 1.2s cubic-bezier(.2,0,.2,1)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.header{grid-area:header;pointer-events:auto;max-width:400px}.header h1{font-family:Orbitron,sans-serif;font-size:1.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;background:linear-gradient(135deg,var(--accent-color),var(--accent-secondary),var(--accent-tertiary));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;filter:drop-shadow(0 0 15px rgba(0,242,255,.3))}.header p{color:#ffffff80;font-size:.85rem;letter-spacing:.05em;line-height:1.4}.header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.header-actions{display:flex;gap:.5rem;margin-top:5px}.icon-btn{width:40px;height:40px;min-width:40px;padding:0;font-size:1.2rem;background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;cursor:pointer}.icon-btn:hover{background:#ffffff1a;transform:scale(1.05)}.icon-btn.audio-toggle.active{background:#00f2ff33;border-color:var(--accent-color);box-shadow:0 0 15px #00f2ff4d}.floating-dock-container{position:absolute;bottom:2rem;left:0;width:100%;display:flex;justify-content:center;z-index:100;pointer-events:none;padding:0 1rem}.floating-dock{pointer-events:auto;display:flex;align-items:center;gap:.5rem;background:#0f0f19bf;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.1);padding:.6rem .8rem;border-radius:1.2rem;box-shadow:0 8px 32px #00000080;transition:all .3s cubic-bezier(.25,.8,.25,1);max-width:100%;overflow-x:hidden}.dock-btn{background:transparent;border:1px solid transparent;border-radius:.8rem;padding:.6rem .9rem;color:#ffffffb3;font-family:Orbitron,sans-serif;font-size:.75rem;letter-spacing:.05em;cursor:pointer;transition:all .2s ease;white-space:nowrap;display:flex;align-items:center;gap:.4rem;position:relative;overflow:hidden}.dock-btn:hover{background:#ffffff1a;color:#fff;transform:translateY(-2px)}.dock-btn:active{transform:translateY(1px)}.dock-btn.random{color:var(--accent-tertiary);border-color:#ff00c833;background:#ff00c80d}.dock-btn.random:hover{background:#ff00c826;box-shadow:0 0 15px #ff00c84d}.dock-btn.special{color:var(--accent-color);border-color:#00f2ff33;background:#00f2ff0d}.dock-btn.special:hover{background:#00f2ff26;box-shadow:0 0 15px #00f2ff4d}.dock-btn.special.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.8);background:#00f2ff05;border-color:#00f2ff1a}.dock-btn.reset-text{color:#ff6b6b;border-color:#ff50504d;background:#ff50501a;padding-left:1rem;padding-right:1rem}.dock-btn.reset-text:hover{background:#ff323233;color:#ff4d4d;box-shadow:0 0 15px #ff323233;transform:translateY(-2px)}.dock-divider{width:1px;height:24px;background:#ffffff26;margin:0 .2rem}@media(max-width:768px){.floating-dock-container{bottom:1.5rem;padding:0 1rem;justify-content:center;pointer-events:none}.floating-dock{max-width:100%;overflow-x:visible;flex-wrap:wrap;justify-content:center;padding:.8rem;gap:.6rem;border-radius:1.5rem;background:#0a0a14d9;pointer-events:auto}.dock-divider{display:none}.dock-btn{padding:.6rem .8rem;font-size:.75rem;flex:1 1 auto;justify-content:center;min-width:80px}.dock-btn.random{flex-basis:100%;order:-1;margin-bottom:.2rem}.dock-btn.special{flex-grow:2}.dock-btn.reset-text{flex-grow:0;min-width:auto}.btn-label{display:inline}}.controls{grid-area:controls;pointer-events:auto;background:var(--glass-bg);backdrop-filter:blur(25px) saturate(180%);-webkit-backdrop-filter:blur(25px) saturate(180%);border:1px solid var(--glass-border);padding:1.5rem;border-radius:1.5rem;display:flex;flex-direction:column;gap:1.25rem;width:320px;max-height:calc(100vh - 5rem);overflow-y:auto;box-shadow:0 12px 40px #00000080;transition:all .3s cubic-bezier(.4,0,.2,1)}@media(max-height:900px){.controls{padding:1.2rem;gap:1rem;width:300px}.control-section{gap:.8rem;padding-top:.6rem}}@media(max-height:750px){.controls{padding:1rem;gap:.8rem;width:280px}.panel-header{font-size:.75rem;padding-bottom:.5rem}.control-section{gap:.5rem;padding-top:.4rem}.control-group{gap:.3rem}.control-group label{font-size:.7rem}.section-title{font-size:.6rem}}.panel-header{font-family:Orbitron,sans-serif;font-size:.85rem;font-weight:700;color:var(--accent-color);text-transform:uppercase;letter-spacing:.15em;padding-bottom:.8rem;border-bottom:1px solid var(--glass-border);margin-bottom:.4rem}.control-section{display:flex;flex-direction:column;gap:.8rem;padding-top:.8rem}.section-title{font-size:.8rem;font-weight:800;color:#ffffffd9;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.2rem;border-left:2px solid var(--accent-color);padding-left:.5rem}.control-group{display:flex;flex-direction:column;gap:.6rem}.control-group label{font-size:.75rem;color:#ffffff80;font-weight:700;text-transform:uppercase;letter-spacing:.05em}input[type=range]{height:4px;background:#ffffff1a;border-radius:2px;outline:none;-webkit-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent-color);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--accent-color);transition:transform .1s ease}.mood-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.mood-btn{padding:.5rem;font-size:.65rem;background:#ffffff08;border:1px solid var(--glass-border);border-radius:.5rem;color:#ffffff80;font-family:inherit;font-weight:700;transition:all .2s ease;cursor:pointer}.mood-btn.active{background:var(--accent-color);color:#020205;border-color:var(--accent-color)}.section-header-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}.section-title{margin-bottom:0!important}.panel-audio-toggle{width:32px;height:22px;background:#ff32320d;border:1px solid rgba(255,50,50,.2);border-radius:6px;font-size:.85rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;line-height:1;opacity:.6}.panel-audio-toggle:hover{background:#ff32321a;opacity:1}.panel-audio-toggle.active{background:#00f2ff26;border-color:var(--accent-color);box-shadow:0 0 10px #00f2ff4d;opacity:1}@media(max-width:768px){.ui-overlay{padding:1rem;grid-template-areas:"header" "." "controls";grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.header h1{font-size:1.2rem}.ui-overlay{grid-template-rows:auto 1fr auto;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.header{pointer-events:auto;margin-bottom:1rem;width:100%}.header-top{display:flex;justify-content:space-between;align-items:center;padding:0 1rem}.header-title{text-align:left}.header p{display:none}.mobile-only-actions{display:flex;align-items:center;z-index:200}.settings-toggle{font-size:1.5rem;padding:.5rem;background:transparent;border:none;color:#fff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:40px;height:40px}.settings-toggle:active{transform:scale(.9)}.controls{pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .3s cubic-bezier(.25,.8,.25,1);position:absolute;top:4rem;left:0;right:0;margin:0 auto;width:95%;max-height:50vh;overflow-y:auto;background:#0a0a12f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-top:none;border-radius:0 0 1.5rem 1.5rem;box-shadow:0 20px 50px #000000b3;z-index:190;padding-bottom:1.5rem}.controls.mobile-open{pointer-events:auto;opacity:1;transform:translateY(0)}.mobile-close-btn{display:none}}@media(min-width:769px){.mobile-only-actions,.mobile-close-btn{display:none!important}}@media(max-width:768px){.mobile-close-btn{display:block}}.settings-panel-3d{transition:all .3s cubic-bezier(.25,.8,.25,1)}.mobile-settings-toggle{display:none!important}@media(max-width:768px){.mobile-settings-toggle{display:flex!important}.settings-panel-3d{pointer-events:none;opacity:0;transform:translate(100%);position:absolute!important;top:60px!important;right:10px!important;width:calc(100% - 20px)!important;max-width:320px!important;max-height:70vh;overflow-y:auto;z-index:9998!important}.settings-panel-3d.mobile-open{pointer-events:auto;opacity:1;transform:translate(0)}}