*{margin:0;padding:0;box-sizing:border-box}body{background:#000;overflow:hidden;font-family:Helvetica Neue,sans-serif;color:#fff}canvas#c{position:fixed;top:0;left:0;z-index:1;touch-action:none}.overlay{position:fixed;top:2rem;left:2rem;right:2rem;display:flex;flex-direction:column;align-items:center;z-index:10;pointer-events:none}.title{font-size:clamp(1.4rem,4vw,3rem);font-weight:100;letter-spacing:.4em;text-transform:uppercase;opacity:0;animation:fadeIn 4s ease forwards .5s;mix-blend-mode:difference;text-align:center}.subtitle{font-size:clamp(.5rem,1.2vw,.75rem);letter-spacing:.6em;text-transform:uppercase;opacity:0;animation:fadeIn 3s ease forwards 2.5s;margin-top:.5rem;mix-blend-mode:difference}.controls{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);display:flex;gap:1.2rem;z-index:20;flex-wrap:wrap;justify-content:center}.btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.15);color:#fff;padding:.5rem 1.5rem;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;transition:all .4s;backdrop-filter:blur(8px);font-family:inherit}.btn:hover{background:#ffffff1f;border-color:#fff6}.btn.active{background:#ffffff26;border-color:#fff}.btn.btn-3d{border-color:#b4c8ff4d;box-shadow:0 0 8px #78a0ff14}.btn.btn-3d:hover{border-color:#b4c8ff99}.btn.btn-3d.active{border-color:#c8dcff;box-shadow:0 0 12px #8cb4ff59}.info{position:fixed;top:5.5rem;right:2rem;z-index:20;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.35;text-align:right;line-height:2}.breath-indicator{position:fixed;bottom:8rem;left:50%;transform:translate(-50%);z-index:15;font-size:.7rem;letter-spacing:.5em;text-transform:uppercase;opacity:0;transition:opacity .5s}.breath-indicator.show{opacity:.5}.input-bar{position:fixed;bottom:6rem;left:50%;transform:translate(-50%);display:flex;gap:.8rem;z-index:25;align-items:center}.input-toggle{background:#ffffff08;border:1px solid rgba(255,255,255,.1);color:#fff6;padding:.35rem 1rem;font-size:.55rem;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:all .4s;backdrop-filter:blur(8px);font-family:inherit;border-radius:2px}.input-toggle:hover{color:#ffffffb3;border-color:#ffffff4d}.input-toggle.on{color:#fff;border-color:#fff9;background:#ffffff1a}.input-toggle.on:before{content:"●";color:#5f5;font-size:.5rem}#webcamPreview{position:fixed;bottom:5rem;right:1.5rem;z-index:30;width:160px;height:120px;border:1px solid rgba(255,255,255,.15);border-radius:4px;object-fit:cover;display:none;transform:scaleX(-1);opacity:.5;transition:opacity .3s}#webcamPreview:hover{opacity:.9}#handCanvas{position:fixed;bottom:5rem;right:1.5rem;z-index:31;width:160px;height:120px;display:none;transform:scaleX(-1);pointer-events:none}.gesture-status{position:fixed;bottom:5rem;right:1.5rem;z-index:32;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .5s;color:#fff9;display:none;text-align:center;width:160px}.gesture-status.show{opacity:1}.music-panel{position:fixed;bottom:5rem;left:1.5rem;z-index:30;display:none;flex-direction:column;gap:.5rem;align-items:flex-start}.music-panel.show{display:flex}.music-label{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;opacity:.5}.music-file-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.2);color:#fff9;padding:.35rem .8rem;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:all .3s;border-radius:2px}.music-file-btn:hover{background:#ffffff1a;color:#fff}#musicFileInput{display:none}.music-viz{width:140px;height:30px;opacity:.6}.music-name{font-size:.45rem;letter-spacing:.15em;opacity:.4;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.music-src-toggle{display:flex;gap:.4rem}.music-src-btn{background:none;border:1px solid rgba(255,255,255,.15);color:#fff6;padding:.2rem .5rem;font-size:.45rem;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:all .3s;border-radius:2px}.music-src-btn.active{color:#fff;border-color:#ffffff80}@keyframes fadeIn{to{opacity:1}}@media(max-width:1100px){.info{top:auto;right:auto;bottom:10rem;left:50%;transform:translate(-50%);text-align:center;font-size:.5rem;opacity:.2}.controls{bottom:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.4rem;width:80vw;max-width:320px}.btn{padding:.4rem 0;font-size:.5rem;letter-spacing:.12em;text-align:center}.input-bar{bottom:5.5rem;gap:.5rem}.input-toggle{padding:.28rem .6rem;font-size:.45rem;letter-spacing:.12em}.breath-indicator{bottom:7.5rem}}@media(max-width:500px){.title{font-size:1.4rem}.subtitle{font-size:.45rem;letter-spacing:.4em}.info{display:none}}