:root{--bg-dark: #1a1a2e;--bg-darker: #16213e;--text-main: rgba(255, 255, 255, .87);--text-muted: rgba(255, 255, 255, .6);--accent-primary: #667eea;--accent-secondary: #764ba2;--accent-gradient: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);--glass-bg: rgba(0, 0, 0, .7);--glass-bg-hover: rgba(0, 0, 0, .8);--glass-border: rgba(255, 255, 255, .1);--glass-blur: blur(10px);--glass-shadow: 0 8px 32px rgba(0, 0, 0, .3);--spacing-sm: 10px;--spacing-md: 20px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 30px;--radius-round: 50%;--font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh;font-family:var(--font-family);line-height:1.5;font-weight:400;color-scheme:dark;color:var(--text-main);background-color:var(--bg-dark);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:url(/cursor.png) 0 0,auto}a,button,.clickable,select,input,.key-cap,.icon-control,#avatar-icon-btn,.avatar-option{cursor:url(/cursor-hand.png) 0 0,url(/cursor.png) 0 0,pointer}#app{width:100%;height:100%;position:relative}#canvas-container{width:100%;height:100%}#canvas-container canvas{display:block;outline:none;cursor:url(/cursor.png) 0 0,auto!important}#canvas-container canvas:active,#canvas-container canvas.interactive{cursor:url(/cursor-hand.png) 0 0,pointer!important}#controls-info{position:absolute;top:var(--spacing-md);left:var(--spacing-md);background:var(--glass-bg);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--spacing-md);color:#fff;font-size:14px;z-index:10;box-shadow:var(--glass-shadow);min-width:250px}#controls-info h2{margin:0 0 15px;font-size:18px;font-weight:600;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}.control-row{display:flex;align-items:center;margin-bottom:12px;gap:10px}.key-group{display:flex;gap:4px}.key-cap{background:#f0f0f0;color:#333;border-radius:6px;padding:4px 8px;font-family:monospace;font-weight:700;font-size:12px;box-shadow:0 3px #ccc;border:1px solid #ccc;min-width:28px;text-align:center;display:inline-block;transform:translateY(0);transition:transform .1s,box-shadow .1s}.key-cap:active,.key-cap.active{transform:translateY(3px);box-shadow:0 0 #ccc;background:#e0e0e0;border-color:#bbb}.key-cap.wide{min-width:50px}.control-desc{font-size:13px;color:var(--text-muted)}.icon-control{width:24px;height:24px;fill:#fff;opacity:.8;transition:all .1s}.icon-control.active{opacity:1;fill:var(--accent-primary);transform:scale(1.2)}#reset-camera{margin-top:15px;padding:8px 16px;background:#4a90e233;border:1px solid rgba(74,144,226,.4);border-radius:var(--radius-sm);color:#fff;cursor:pointer;font-family:inherit;font-size:.9rem;transition:all .3s ease;width:100%}#reset-camera:hover{background:#4a90e266;border-color:#4a90e2cc;transform:translateY(-1px)}#reset-camera:active{transform:translateY(1px)}#audio-controls{position:fixed;top:var(--spacing-md);right:var(--spacing-md);z-index:100;display:flex;align-items:center;gap:var(--spacing-sm);background:#00000080;padding:var(--spacing-sm);border-radius:var(--radius-lg);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border)}#mute-btn{background:transparent;border:none;width:30px;height:30px;color:#fff;font-size:20px;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:transform .2s}#mute-btn:hover{transform:scale(1.2)}#volume-slider{width:0;opacity:0;height:4px;-webkit-appearance:none;appearance:none;background:#fff3;border-radius:2px;outline:none;transition:all .3s ease;pointer-events:none}#audio-controls:hover #volume-slider{width:100px;opacity:1;pointer-events:auto;margin-left:5px}#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;cursor:pointer;transition:transform .2s}#volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}#avatar-container{position:fixed;top:90px;right:var(--spacing-md);z-index:100}#avatar-icon-btn{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-round);width:40px;height:40px;color:#fff;font-size:20px;cursor:pointer;backdrop-filter:var(--glass-blur);transition:all .3s ease;display:flex;justify-content:center;align-items:center}#avatar-icon-btn:hover{background:#ffffff1a;transform:scale(1.1)}#avatar-dropdown{position:absolute;top:50px;right:0;background:var(--glass-bg-hover);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--spacing-sm);width:200px;display:none;flex-direction:column;gap:5px;max-height:400px;overflow-y:auto}#avatar-dropdown.active{display:flex}.avatar-category{color:#888;font-size:12px;text-transform:uppercase;margin:5px 0 2px 5px;font-weight:700}.avatar-option{background:transparent;border:none;color:#fff;padding:8px 12px;text-align:left;cursor:pointer;border-radius:6px;transition:background .2s;font-size:14px}.avatar-option:hover{background:#ffffff1a}#credits{position:absolute;bottom:var(--spacing-md);right:var(--spacing-md);background:var(--glass-bg);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--spacing-sm) 15px;color:#fff;font-size:12px;z-index:100;box-shadow:var(--glass-shadow);pointer-events:auto}#credits a{color:#fff;text-decoration:none;font-weight:700}#credits a:hover{text-decoration:underline}#interaction-hint{position:absolute;top:0;left:0;background:var(--glass-bg);color:#fff;padding:var(--spacing-sm) 20px;border-radius:20px;font-weight:600;pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:100;backdrop-filter:blur(4px);border:1px solid var(--glass-border);white-space:nowrap}#interaction-hint.visible{opacity:1}.hint-text{display:inline-block;animation:pulse 1.5s infinite ease-in-out}.loading{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--bg-dark) 0%,var(--bg-darker) 100%);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;transition:opacity .5s ease}.loading-spinner{width:60px;height:60px;border:4px solid rgba(102,126,234,.1);border-top-color:var(--accent-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading p{color:#fffc;font-size:16px;font-weight:500}#project-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;backdrop-filter:blur(10px);z-index:2000;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}#project-modal.active{opacity:1}.modal-content{background:linear-gradient(135deg,#1e1e2efa,#141424fa);border:2px solid rgba(102,126,234,.3);border-radius:24px;width:90%;max-width:700px;padding:0;box-shadow:0 30px 60px #000000b3,0 0 0 1px #ffffff1a inset;transform:scale(.9);transition:transform .4s cubic-bezier(.175,.885,.32,1.275);overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(20px)}#project-modal.active .modal-content{transform:scale(1)}.modal-header{padding:24px 30px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#667eea26,#764ba226);position:relative;overflow:hidden}.modal-header:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent-gradient)}.modal-header h2{margin:0;font-size:1.8rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.close-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:50%;width:40px;height:40px;color:#fff9;font-size:1.5rem;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:#ffffff1a;color:#fff;transform:rotate(90deg)}.modal-body{padding:30px;max-height:70vh;overflow-y:auto}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.modal-body::-webkit-scrollbar-thumb{background:#667eea80;border-radius:4px}.modal-body::-webkit-scrollbar-thumb:hover{background:#667eeab3}#project-image{width:100%;height:350px;object-fit:cover;border-radius:16px;margin-bottom:20px;background:linear-gradient(135deg,#2c3e50,#34495e);box-shadow:0 10px 30px #0000004d;border:1px solid rgba(255,255,255,.1)}#project-desc{color:#ffffffd9;line-height:1.8;margin-bottom:0;font-size:1rem}.modal-footer{padding:24px 30px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:flex-end;background:#0003}.project-link-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:var(--accent-gradient);color:#fff;text-decoration:none;border-radius:12px;font-weight:600;font-size:1rem;transition:all .3s;box-shadow:0 4px 15px #667eea4d;position:relative;overflow:hidden}.project-link-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.project-link-btn:hover:before{left:100%}.project-link-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #667eea80}.project-link-btn:active{transform:translateY(-1px)}@media(max-width:768px){#controls-info{font-size:12px;padding:15px;top:10px;left:10px}#controls-info h2{font-size:16px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}#controls-info{animation:fadeIn .6s ease-out}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}