*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a0f;--surface:rgba(255,255,255,0.04);--surface-hover:rgba(255,255,255,0.08);--border:rgba(255,255,255,0.08);--text-primary:rgba(255,255,255,0.9);--text-secondary:rgba(255,255,255,0.45);--text-dim:rgba(255,255,255,0.25);--accent:#7c6aef;--accent-glow:rgba(124,106,239,0.3);--font-sans:'Space Grotesk',system-ui,sans-serif;--font-mono:'Space Mono','Courier New',monospace;--radius:8px;--transition:0.3s cubic-bezier(0.4,0,0.2,1)}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text-primary);font-family:var(--font-sans);cursor:crosshair;-webkit-font-smoothing:antialiased}
#canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}
.header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 28px;z-index:10;pointer-events:none}
.logo{display:flex;align-items:center;gap:10px;pointer-events:auto}
.logo-icon{font-size:18px;color:var(--accent);animation:pulse-glow 3s ease-in-out infinite}
.logo-text{font-size:18px;font-weight:500;letter-spacing:3px;text-transform:lowercase;color:var(--text-primary)}
.nav{display:flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:10px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);pointer-events:auto}
.nav-link{padding:6px 16px;font-size:12px;font-family:var(--font-mono);font-weight:400;letter-spacing:0.5px;text-decoration:none;color:var(--text-secondary);border-radius:7px;transition:var(--transition);cursor:pointer}
.nav-link:hover{color:var(--text-primary);background:var(--surface-hover)}
.nav-link.active{color:var(--text-primary);background:var(--accent);box-shadow:0 2px 12px var(--accent-glow)}
.info-panel{position:fixed;top:50%;right:28px;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;z-index:10;pointer-events:none}
.info-label{font-family:var(--font-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-top:12px}
.info-label:first-child{margin-top:0}
.info-value{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);letter-spacing:1px}
.controls{position:fixed;bottom:28px;right:28px;display:flex;gap:6px;z-index:10}
.btn{display:flex;align-items:center;gap:8px;padding:8px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.5px;color:var(--text-secondary);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);cursor:pointer;transition:var(--transition);outline:none}
.btn:hover{color:var(--text-primary);background:var(--surface-hover);border-color:rgba(255,255,255,0.15);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{opacity:0.7;flex-shrink:0}
.btn:hover svg{opacity:1}
.footer{position:fixed;bottom:28px;left:28px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--text-dim);z-index:10;pointer-events:none}
.separator{opacity:0.4}
.cursor-hint{position:fixed;bottom:50%;left:50%;transform:translate(-50%,50%);font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--text-dim);z-index:10;pointer-events:none;opacity:1;transition:opacity 1.5s ease}
.cursor-hint.hidden{opacity:0}
@keyframes pulse-glow{0%,100%{opacity:1;text-shadow:0 0 8px var(--accent-glow)}50%{opacity:0.6;text-shadow:0 0 20px var(--accent-glow)}}
@media(max-width:768px){.header{padding:16px 20px}.info-panel{display:none}.controls{bottom:20px;right:20px}.btn span{display:none}.btn{padding:10px}.footer{bottom:20px;left:20px;font-size:9px}.nav-link{padding:6px 12px;font-size:11px}}
@media(max-width:480px){.nav{display:none}}