:root{font-family:Inter,system-ui,sans-serif;background-color:#000;color:#fff}body{margin:0;padding:0}html,body,#root{margin:0;padding:0;width:100%;height:100%;height:100dvh;background:#000;overflow:hidden;font-family:Inter,sans-serif}.app-container{width:100%;height:100%;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden}canvas{width:100%!important;height:100%!important;display:block;outline:none}.overlay-start{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000000e6;z-index:20}.start-content{text-align:center;color:#fff}.start-content h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(45deg,#f0f,#0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.start-btn{margin-top:2rem;padding:1rem 2rem;background:#222;border:1px solid #444;color:#fff;border-radius:50px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:1.2rem;transition:all .3s ease}.start-btn:hover{background:#333;border-color:#f0f;transform:scale(1.05)}.interactive-ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .3s ease-in-out;z-index:50}.app-container:hover .interactive-ui{opacity:1}.mode-overlay,.menu-toggle,.fullscreen-toggle,.color-menu{pointer-events:auto}.ui-overlay{position:absolute;top:20px;left:20px;z-index:10;pointer-events:none}.status-indicator{display:flex;align-items:center;gap:8px;color:#fff;background:#0009;padding:8px 16px;border-radius:20px;border:1px solid #333;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.fullscreen-toggle{position:absolute;top:20px;right:80px;width:44px;height:44px;border-radius:50%;background:#141414cc;border:1px solid #333;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;pointer-events:auto}.fullscreen-toggle:hover{background:#282828e6}.mode-overlay{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;background:#141414cc;border:1px solid #333;border-radius:30px;padding:4px;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mode-btn{background:transparent;border:none;color:#888;padding:10px 24px;border-radius:25px;font-size:.9rem;cursor:pointer;transition:all .2s}.mode-btn.active{background:#333;color:#fff;font-weight:600;box-shadow:0 2px 10px #0000004d}.divider{width:1px;background:#333;margin:8px 0}.menu-toggle{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;background:#141414cc;border:1px solid #333;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:15;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform .2s}.menu-toggle:active{transform:scale(.9)}.color-menu{position:absolute;top:80px;right:20px;background:#0a0a0af2;border:1px solid #333;border-radius:16px;padding:16px;width:200px;z-index:15;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 10px 30px #00000080}.color-menu h3{margin:0 0 12px;font-size:.9rem;color:#aaa;text-transform:uppercase;letter-spacing:1px}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.color-btn{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .2s;padding:0}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:#fff;box-shadow:0 0 10px #ffffff4d;transform:scale(1.15)}.canvas-click-layer{display:none}@media(max-width:768px){.interactive-ui{opacity:1!important;pointer-events:none}.mode-overlay{bottom:40px}.fullscreen-toggle{right:70px;width:40px;height:40px}.menu-toggle{width:40px;height:40px}.status-indicator{padding:6px 12px;font-size:.8rem}.color-menu{top:70px;width:180px}}@media(max-height:600px){.mode-overlay{bottom:20px}}