:root{--bg-color: #05070c;--hud-bg: rgba(10, 16, 26, .72);--hud-border: rgba(64, 128, 200, .25);--accent-cyan: #00e5ff;--accent-orange: #ff9922;--accent-green: #39e75f;--text-main: #e2e8f0;--text-muted: #8492a6;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body,html{width:100%;height:100%;overflow:hidden;background-color:var(--bg-color);color:var(--text-main)}#canvas-container{width:100vw;height:100vh;position:absolute;top:0;left:0;z-index:1}.hud-header{position:absolute;top:20px;left:24px;z-index:10;background:var(--hud-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--hud-border);border-radius:12px;padding:16px 22px;box-shadow:0 8px 32px #00000080;pointer-events:auto;max-width:480px}.hud-title-row{display:flex;align-items:center;gap:10px;margin-bottom:4px}.hud-pulse{width:10px;height:10px;border-radius:50%;background:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan);animation:pulse-glow 2s infinite ease-in-out}@keyframes pulse-glow{0%,to{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}.hud-title{font-size:1.15rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#fff}.hud-subtitle{font-size:.78rem;color:var(--text-muted);line-height:1.4;margin-bottom:10px}.hud-stats-row{display:flex;gap:16px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);font-size:.75rem}.stat-item{display:flex;flex-direction:column}.stat-val{font-size:.95rem;font-weight:700;color:var(--accent-cyan);font-family:monospace}.stat-label{color:var(--text-muted);text-transform:uppercase;font-size:.65rem;letter-spacing:.5px}.hud-legend{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}.legend-title{font-size:.7rem;color:var(--text-muted);margin-bottom:5px;display:flex;justify-content:space-between}.legend-bar{width:100%;height:10px;border-radius:5px;background:linear-gradient(to right,#140038,#052ea8,#00a7d9 28%,#1ebf29 44%,#c7d91a 62%,#f59405 78%,#d91e0d 92%,#8c0514);border:1px solid rgba(255,255,255,.2)}.legend-labels{display:flex;justify-content:space-between;font-size:.65rem;color:var(--text-muted);margin-top:4px}.hud-bottom-bar{position:absolute;bottom:24px;left:50%;transform:translate(-50%);z-index:10;display:flex;gap:10px;background:var(--hud-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--hud-border);padding:8px 12px;border-radius:30px;box-shadow:0 10px 30px #0009}.preset-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#d1d5db;padding:8px 16px;border-radius:20px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.preset-btn:hover{background:#00e5ff26;border-color:var(--accent-cyan);color:#fff;transform:translateY(-1px)}.preset-btn.active{background:var(--accent-cyan);color:#05070c;font-weight:700;border-color:var(--accent-cyan);box-shadow:0 0 14px #00e5ff80}.cosmic-labels-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.cosmic-badge{position:absolute;display:flex;align-items:center;gap:8px;background:#080c14d1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:4px 10px;box-shadow:0 4px 15px #0009;transition:opacity .2s;pointer-events:auto;cursor:default}.badge-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.badge-info{display:flex;flex-direction:column}.badge-title{font-size:.72rem;font-weight:700;letter-spacing:.4px;white-space:nowrap}.badge-subtitle{font-size:.6rem;color:var(--text-muted);white-space:nowrap}.lil-gui{--background-color: rgba(10, 16, 26, .85) !important;--text-color: #d1d5db !important;--title-background-color: rgba(18, 28, 45, .95) !important;--widget-color: rgba(30, 42, 60, .9) !important;--hover-color: rgba(0, 229, 255, .25) !important;--focus-color: var(--accent-cyan) !important;--number-color: var(--accent-cyan) !important;--string-color: #64b5f6 !important;font-family:inherit!important;border-radius:10px!important;border:1px solid var(--hud-border)!important;box-shadow:0 10px 30px #0009!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;top:20px!important;right:20px!important}.lil-gui .title{font-weight:700!important;letter-spacing:.8px!important;color:#fff!important}.rec-dock-panel{position:absolute;bottom:24px;right:24px;z-index:12;background:var(--hud-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--hud-border);border-radius:16px;padding:14px 18px;box-shadow:0 12px 36px #000000a6;display:flex;flex-direction:column;gap:10px;min-width:290px;pointer-events:auto}.rec-dock-header{display:flex;justify-content:space-between;align-items:center}.rec-dock-title{font-size:.82rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#fff}.rec-dock-status{font-size:.68rem;font-weight:600;padding:2px 8px;border-radius:10px;background:#00e5ff26;color:var(--accent-cyan);border:1px solid rgba(0,229,255,.3);text-transform:uppercase;letter-spacing:.5px}.rec-dock-status.recording{background:#f443;color:#f55;border-color:#ff444480;animation:pulse-glow 1.2s infinite ease-in-out}.rec-dock-controls{display:flex;flex-direction:column;gap:8px}.rec-dock-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#ffffff0f;border:1px solid rgba(255,255,255,.14);color:#e2e8f0;padding:8px 14px;border-radius:10px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease}.rec-dock-btn:hover{background:#00e5ff26;border-color:var(--accent-cyan);color:#fff;transform:translateY(-1px)}.rec-dock-btn.active{background:#00e5ff33;border-color:var(--accent-cyan);color:var(--accent-cyan);box-shadow:0 0 12px #00e5ff4d}.rec-dock-btn.rec-btn-record{background:linear-gradient(135deg,#e6283c40,#ff503259);border-color:#ff505080;color:#fdd}.rec-dock-btn.rec-btn-record:hover{background:linear-gradient(135deg,#e6283c73,#ff50328c);border-color:#f44;color:#fff;box-shadow:0 0 15px #ff444473}.rec-dock-btn.rec-btn-record.recording{background:#f34;color:#fff;box-shadow:0 0 20px #ff3344b3}.rec-record-dot{width:10px;height:10px;border-radius:50%;background:#f45;box-shadow:0 0 8px #f45}.rec-dock-pills{display:flex;justify-content:space-between;gap:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08)}.rec-pill-group{display:flex;align-items:center;gap:4px}.rec-pill-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase;margin-right:2px}.rec-pill{background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:#94a3b8;padding:3px 8px;border-radius:6px;font-size:.68rem;cursor:pointer;transition:all .15s}.rec-pill:hover{color:#fff;border-color:#ffffff4d}.rec-pill.active{background:#00e5ff33;border-color:var(--accent-cyan);color:#fff;font-weight:700}.rec-progress-container{display:flex;flex-direction:column;gap:4px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08)}.rec-progress-info{display:flex;justify-content:space-between;font-size:.68rem;color:var(--accent-cyan);font-weight:600}.rec-progress-track{width:100%;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.rec-progress-fill{width:0%;height:100%;background:linear-gradient(to right,var(--accent-cyan),#ff9922);transition:width .1s linear}.rec-modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#03060cd9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:100;display:flex;align-items:center;justify-content:center}.rec-modal-card{background:#0c121ef2;border:1px solid rgba(0,229,255,.3);border-radius:20px;padding:24px;max-width:680px;width:90%;box-shadow:0 20px 60px #000c,0 0 30px #00e5ff26;display:flex;flex-direction:column;gap:16px;animation:modal-pop .3s cubic-bezier(.16,1,.3,1)}@keyframes modal-pop{0%{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.rec-modal-header{display:flex;justify-content:space-between;align-items:center}.rec-modal-title{display:flex;align-items:center;gap:10px}.rec-modal-title h3{font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:.5px}.rec-badge-dot{width:10px;height:10px;border-radius:50%;background:var(--accent-green);box-shadow:0 0 10px var(--accent-green)}.rec-close-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#cbd5e1;width:32px;height:32px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.rec-close-btn:hover{background:#ff444440;color:#fff;border-color:#f55}.rec-preview-container{width:100%;max-height:380px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#020306;display:flex;align-items:center;justify-content:center}.rec-gif-img{max-width:100%;max-height:380px;object-fit:contain;border-radius:10px}.rec-meta-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:12px;background:#ffffff08;border-radius:12px;border:1px solid rgba(255,255,255,.06)}.rec-meta-item{display:flex;flex-direction:column;align-items:center}.rec-meta-val{font-size:.95rem;font-weight:700;color:var(--accent-cyan);font-family:monospace}.rec-meta-label{font-size:.65rem;color:var(--text-muted);text-transform:uppercase}.rec-actions-row{display:flex;gap:12px;justify-content:flex-end}.rec-btn{padding:10px 22px;border-radius:12px;font-size:.85rem;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:all .2s}.rec-btn-primary{background:linear-gradient(135deg,var(--accent-cyan),#0099ff);color:#05070c;box-shadow:0 4px 20px #00e5ff66}.rec-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px #00e5ff99}.rec-btn-secondary{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#e2e8f0}.rec-btn-secondary:hover{background:#ffffff26;color:#fff;border-color:#ffffff4d}