html,body,#root{background-color:#0b0c10;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}:root{--font-display:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--color-moab:#d48d61;--color-moab-glow:#d48d6166;--color-yosemite:#5c7cfa;--color-yosemite-glow:#5c7cfa66;--color-city:#fcc419;--color-city-glow:#fcc41966;--active-color:var(--color-moab);--active-glow:var(--color-moab-glow);color:#f1f3f5;background-color:#0b0c10;margin:0;padding:0;overflow:hidden}body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.webgl-canvas{display:block;width:100%!important;height:100%!important}.brand-header{z-index:10;pointer-events:auto;align-items:center;gap:.75rem;display:flex;position:absolute;top:2rem;left:2rem}.logo-icon{width:2.2rem;height:2.2rem;color:var(--active-color);filter:drop-shadow(0 0 8px var(--active-glow));transition:all .5s}.brand-title{font-family:var(--font-display);letter-spacing:-.03em;background:linear-gradient(135deg, #fff 30%, var(--active-color) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:1.8rem;font-weight:800;transition:all .5s}.ui-panel{-webkit-backdrop-filter:blur(16px);z-index:10;box-sizing:border-box;pointer-events:auto;scrollbar-width:thin;scrollbar-color:#ffffff1a transparent;background:#0f111aa6;border:1px solid #ffffff14;border-radius:20px;flex-direction:column;width:380px;padding:1.5rem;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .5s;display:flex;position:absolute;top:2rem;bottom:2rem;right:2rem;overflow-y:auto;transform:translate(0);box-shadow:0 20px 40px #00000080,inset 0 1px #ffffff1a}.ui-panel.collapsed{transform:translate(calc(100% + 3rem))}.ui-panel::-webkit-scrollbar{width:4px}.ui-panel::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.panel-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:.75rem;display:flex}.panel-header h2{font-family:var(--font-display);letter-spacing:-.01em;margin:0;font-size:1.3rem;font-weight:700}.panel-section{flex-direction:column;gap:1rem;margin-bottom:1.75rem;display:flex}.section-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:#ffffff80;margin:0 0 .25rem;font-size:.9rem;font-weight:600}.env-grid{grid-template-columns:1fr;gap:.75rem;display:grid}.env-card{cursor:pointer;background:#ffffff08;border:1px solid #ffffff0f;border-radius:12px;flex-direction:column;gap:.25rem;padding:1rem;transition:all .3s cubic-bezier(.25,.8,.25,1);display:flex;position:relative;overflow:hidden}.env-card:hover{background:#ffffff0f;border-color:#ffffff26;transform:translateY(-2px)}.env-card.active{border-color:var(--active-color);box-shadow:0 0 15px var(--active-glow);background:#ffffff14}.env-card:before{content:"";background:0 0;width:4px;transition:background .3s;position:absolute;top:0;bottom:0;left:0}.env-card.active:before{background:var(--active-color)}.env-name{font-family:var(--font-display);margin:0;font-size:1.1rem;font-weight:700}.env-desc{color:#fff9;margin:0;font-size:.8rem;line-height:1.4}.switch-container{background:#ffffff05;border:1px solid #ffffff0d;border-radius:10px;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.switch-label{align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;display:flex}.switch-subtext{color:#ffffff80;margin-top:.1rem;font-size:.75rem;font-weight:400;display:block}.toggle-switch{width:46px;height:24px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.slider-round{cursor:pointer;background-color:#ffffff26;border-radius:34px;transition:all .4s;position:absolute;inset:0}.slider-round:before{content:"";background-color:#fff;border-radius:50%;width:18px;height:18px;transition:all .4s;position:absolute;bottom:3px;left:3px;box-shadow:0 2px 4px #0000004d}input:checked+.slider-round{background-color:var(--active-color)}input:focus+.slider-round{box-shadow:0 0 1px var(--active-color)}input:checked+.slider-round:before{transform:translate(22px)}.slider-group{flex-direction:column;gap:.85rem;display:flex}.slider-item{flex-direction:column;gap:.35rem;display:flex}.slider-header{justify-content:space-between;font-size:.8rem;font-weight:500;display:flex}.slider-val{color:var(--active-color);font-family:monospace;font-weight:700}.range-input{-webkit-appearance:none;background:#ffffff1a;border-radius:3px;outline:none;width:100%;height:6px;transition:background .3s}.range-input::-webkit-slider-thumb{appearance:none;background:var(--active-color);cursor:pointer;width:16px;height:16px;box-shadow:0 0 8px var(--active-glow);border-radius:50%;transition:transform .1s}.range-input::-webkit-slider-thumb:hover{transform:scale(1.2)}.webcam-container{aspect-ratio:4/3;background:#000;border:1px solid #ffffff14;border-radius:12px;width:100%;position:relative;overflow:hidden}.webcam-video-hidden{display:none}.webcam-canvas{background:radial-gradient(circle,#0f141e 0%,#05050a 100%);width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}.webcam-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;text-align:center;background:#0009;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:1.5rem;font-size:.85rem;display:flex;position:absolute;inset:0}.loader-spinner{border:3px solid #ffffff1a;border-top-color:var(--active-color);width:2rem;height:2rem;box-shadow:0 0 8px var(--active-glow);border-radius:50%;animation:1s linear infinite spin}.status-badge{text-transform:uppercase;letter-spacing:.05em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000a6;border:1px solid #ffffff1a;border-radius:6px;align-items:center;gap:.35rem;padding:.35rem .6rem;font-size:.7rem;font-weight:700;display:flex;position:absolute;top:.75rem;left:.75rem}.status-dot{background:#f36;border-radius:50%;width:6px;height:6px}.status-dot.active{background:#0fc;box-shadow:0 0 6px #0fc}.action-buttons{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.btn-primary{font-family:var(--font-display);background:var(--active-color);color:#0b0c10;cursor:pointer;box-shadow:0 4px 12px var(--active-glow);border:none;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem;font-size:.95rem;font-weight:700;transition:all .2s;display:flex}.btn-primary:hover{box-shadow:0 6px 18px var(--active-glow);transform:translateY(-1px)}.btn-secondary{font-family:var(--font-display);color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;padding:.75rem;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.panel-toggle-btn{z-index:11;-webkit-backdrop-filter:blur(16px);color:#fff;cursor:pointer;background:#0f111aa6;border:1px solid #ffffff14;border-radius:15px;justify-content:center;align-items:center;width:3rem;height:3rem;transition:all .3s;display:flex;position:absolute;top:2rem;right:2rem;box-shadow:0 4px 12px #0006}.panel-toggle-btn:hover{border-color:var(--active-color);color:var(--active-color);background:#ffffff14}.instruction-card{z-index:10;-webkit-backdrop-filter:blur(12px);pointer-events:none;background:#0f111a99;border:1px solid #ffffff0f;border-radius:16px;max-width:320px;padding:1rem 1.25rem;position:absolute;bottom:2rem;left:2rem;box-shadow:0 10px 30px #0000004d}.instruction-card h3{font-family:var(--font-display);color:#fff;margin:0 0 .5rem;font-size:.95rem;font-weight:700}.instruction-list{flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.instruction-list li{color:#ffffffb3;align-items:center;gap:.5rem;font-size:.8rem;display:flex}.key-badge{color:#fff;background:#ffffff26;border:1px solid #fff3;border-bottom:2px solid #ffffff4d;border-radius:4px;padding:.1rem .4rem;font-family:monospace;font-size:.75rem;font-weight:700}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=768px){.ui-panel{width:calc(100vw - 2rem);height:60vh;inset:auto 1rem 1rem}.ui-panel.collapsed{transform:translateY(calc(100% + 2rem))}.panel-toggle-btn{top:auto;bottom:calc(60vh + 1.5rem);right:1rem}.panel-toggle-btn.collapsed-state{bottom:1rem}}.climb-hud{z-index:10;-webkit-backdrop-filter:blur(16px);pointer-events:auto;background:#0f111aa6;border:1px solid #ffffff14;border-radius:16px;flex-direction:column;gap:.75rem;width:240px;padding:1.25rem;transition:border-color .5s;display:flex;position:absolute;top:7rem;left:2rem;box-shadow:0 20px 40px #0006,inset 0 1px #ffffff1a}.hud-metric{justify-content:space-between;align-items:baseline;display:flex}.hud-label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:#ffffff80;font-size:.8rem}.hud-val{font-family:var(--font-display);color:#fff;text-shadow:0 0 10px #ffffff1a;font-size:1.35rem;font-weight:800}.hud-progress-bar{background:#ffffff1a;border-radius:3px;width:100%;height:6px;overflow:hidden}.hud-progress-fill{background:var(--active-color);height:100%;box-shadow:0 0 8px var(--active-glow);width:0;transition:width .3s cubic-bezier(.1,.8,.2,1)}.btn-reset-climb{font-family:var(--font-display);color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;justify-content:center;align-items:center;gap:.35rem;padding:.5rem;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.btn-reset-climb:hover{border-color:var(--active-color);box-shadow:0 0 10px var(--active-glow);background:#ffffff1f}