:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a25;--text-primary: #ffffff;--text-secondary: #a1a1aa;--text-muted: #71717a;--border-color: #27272a;--primary: #3b82f6;--primary-light: #60a5fa;--primary-dark: #1d4ed8;--glow: #3b82f6}[data-theme=light]{--bg-primary: #e8e8ec;--bg-secondary: #d8d8dc;--bg-tertiary: #c8c8cc;--text-primary: #18181b;--text-secondary: #3f3f46;--text-muted: #52525b;--border-color: #a1a1aa}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:3px}::selection{background:var(--primary);color:#fff}.canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.ui-overlay{position:fixed;z-index:10;pointer-events:none}.ui-overlay>*{pointer-events:auto}.header{position:fixed;top:0;left:0;right:0;padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;z-index:100;background:linear-gradient(to bottom,var(--bg-primary) 0%,transparent 100%)}.logo{font-size:1.5rem;font-weight:700;color:var(--primary);text-shadow:0 0 20px var(--glow)}.nav-links{display:flex;gap:2rem}.nav-link{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:color .2s ease,text-shadow .2s ease;cursor:pointer}.nav-link:hover{color:var(--primary);text-shadow:0 0 10px var(--glow)}.controls-panel{position:fixed;top:50%;right:1.5rem;transform:translateY(-50%);display:flex;flex-direction:column;gap:.75rem;z-index:100}.control-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-btn:hover{border-color:var(--primary);box-shadow:0 0 15px var(--glow);transform:scale(1.05)}.control-btn.active{background:var(--primary);border-color:var(--primary)}.color-picker{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;gap:.5rem;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.color-option{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s ease}.color-option:hover{transform:scale(1.15)}.color-option.active{border-color:#fff;box-shadow:0 0 15px currentColor}.info-panel{position:fixed;left:2rem;top:50%;transform:translateY(-50%);max-width:350px;padding:1.5rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:100}.info-panel h2{font-size:1.25rem;font-weight:600;margin-bottom:.75rem;color:var(--primary)}.info-panel p{color:var(--text-secondary);line-height:1.6;font-size:.9rem}.info-panel .close-btn{position:absolute;top:.75rem;right:.75rem;width:28px;height:28px;border-radius:50%;border:none;background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.info-panel .close-btn:hover{background:var(--primary);color:#fff}.instructions{position:fixed;bottom:5rem;left:50%;transform:translate(-50%);text-align:center;color:var(--text-muted);font-size:.85rem;z-index:100;pointer-events:none}.loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.loading-spinner{width:48px;height:48px;border:3px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-top:1rem;color:var(--text-secondary);font-size:.9rem}@keyframes pulse-glow{0%,to{opacity:.5}50%{opacity:1}}@media(max-width:768px){.header{padding:1rem}.nav-links{display:none}.info-panel{left:1rem;right:1rem;max-width:none;bottom:6rem;top:auto;transform:none;max-height:50vh;overflow-y:auto}.info-panel h2{font-size:1.1rem}.info-panel p{font-size:.85rem}.controls-panel--mobile{position:fixed;top:auto;bottom:2.5rem;left:50%;right:auto;transform:translate(-50%);flex-direction:row;gap:.75rem}.control-btn{width:40px;height:40px}.instructions{bottom:1rem;font-size:.75rem;padding:0 1rem}.color-picker{bottom:1rem;padding:.5rem .75rem}.color-option{width:24px;height:24px}}@media(max-width:480px){.header{padding:.75rem}.logo{font-size:1.2rem}.info-panel{left:.75rem;right:.75rem;bottom:5rem;padding:1rem;max-height:45vh;border-radius:12px}.info-panel h2{font-size:1rem;margin-bottom:.5rem;padding-right:1.5rem}.info-panel p{font-size:.8rem;line-height:1.5}.info-panel .close-btn{width:24px;height:24px;top:.5rem;right:.5rem}.controls-panel--mobile{bottom:2rem;gap:.5rem}.control-btn{width:36px;height:36px;border-radius:10px}.control-btn svg{width:16px;height:16px}.instructions{bottom:.5rem;font-size:.7rem;left:.5rem;right:.5rem;transform:none;width:auto}.color-picker{bottom:.75rem;gap:.35rem;padding:.4rem .6rem}.color-option{width:20px;height:20px}}@media(max-height:500px)and (orientation:landscape){.header{padding:.5rem 1rem;background:transparent}.logo{font-size:1rem}.info-panel{top:50%;bottom:auto;transform:translateY(-50%);left:.5rem;max-width:280px;max-height:80vh;padding:.75rem}.info-panel h2{font-size:.9rem}.info-panel p{font-size:.75rem}.controls-panel{top:50%;transform:translateY(-50%);right:.5rem;flex-direction:column}.control-btn{width:32px;height:32px}.instructions,.color-picker{display:none}}