body{margin:0;padding:0;font-family:sans-serif;background-color:#111;color:#eee}body.fullscreen-view{overflow:hidden}#root{width:100vw;min-height:100vh;position:relative}body.fullscreen-view #root{height:100vh;overflow:hidden}#three-canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}#frequency-canvas{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:50%;max-width:600px;height:100px;background-color:#0000004d;border:1px solid rgba(255,255,255,.2);border-radius:5px;z-index:2}#start-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:15px 30px;font-size:1.2em;cursor:pointer;background-color:#444;color:#eee;border:1px solid #666;border-radius:5px;z-index:3;transition:background-color .3s ease}#start-button:hover{background-color:#555}#start-button:disabled{cursor:not-allowed;opacity:.5}#root.audio-started #start-button{display:none}.hexa-test-container{width:100vw;height:100vh;position:relative;overflow:hidden}.info-panel{position:absolute;top:20px;left:20px;background-color:#000000b3;color:#fff;padding:15px;border-radius:5px;z-index:10;max-width:300px;font-family:Arial,sans-serif}.info-panel h1{margin-top:0;font-size:1.5rem;color:#4285f4}.info-panel p{margin:10px 0;font-size:.9rem}.info-panel a{color:#4285f4;text-decoration:none}.info-panel a:hover{text-decoration:underline}.controls-info{margin-top:15px;border-top:1px solid rgba(255,255,255,.2);padding-top:10px}.controls-info h3{margin-top:0;font-size:1rem;color:#fbbc05}.controls-info ul{margin:5px 0;padding-left:20px;font-size:.8rem}.controls-info li{margin-bottom:5px}.mode-chooser{min-height:100vh;background:linear-gradient(135deg,#0a0a0a,#1a1a2e,#16213e);display:flex;align-items:center;justify-content:center;padding:20px 20px 40px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}.mode-chooser-container{max-width:1200px;width:100%;text-align:center}.mode-chooser-title{color:#fff;font-size:2.5em;margin-bottom:2em;font-weight:300;text-shadow:0 0 20px rgba(255,255,255,.3)}.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:3em}.mode-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:15px;padding:30px;text-decoration:none;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-height:200px;display:flex;flex-direction:column;justify-content:center}.mode-card:hover{transform:translateY(-10px);background:#ffffff1a;border-color:#4285f480;box-shadow:0 10px 30px #4285f433}.mode-card-content h2{color:#4285f4;font-size:1.5em;margin-bottom:15px;font-weight:500}.mode-card-content p{color:#ccc;font-size:1em;line-height:1.5;margin-bottom:20px}.mode-card-preview{font-size:3em;margin:10px 0;opacity:.8;transition:all .3s ease}.mode-card:hover .mode-card-preview{transform:scale(1.1);opacity:1}.legacy-link{color:#888;text-decoration:none;font-size:.9em;opacity:.7;transition:opacity .3s ease}.legacy-link:hover{opacity:1;color:#aaa}@media (max-width: 768px){.mode-chooser{align-items:flex-start;padding-top:30px}.mode-cards{grid-template-columns:1fr;gap:20px}.mode-chooser-title{font-size:1.6em;margin-bottom:1.2em}.mode-card{padding:20px;min-height:130px;cursor:pointer;-webkit-tap-highlight-color:rgba(66,133,244,.3);touch-action:manipulation}.mode-card-preview{font-size:2.5em}.legacy-link{display:block;padding:12px 0;font-size:1em}}