.home{width:100%;min-height:100vh;background:linear-gradient(to top,#1a1a1a,#000);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:40px 20px;color:#fff}.home-loading{font-size:18px;opacity:.8;margin-top:100px}.home-header{text-align:center;margin-bottom:40px;max-width:600px}.home-header h1{font-size:32px;margin-bottom:10px;font-weight:700}.home-header p{font-size:16px;opacity:.8;margin-bottom:20px}.home-youtube-link{display:inline-block;margin-top:20px;padding:12px 24px;background:#f003;border:2px solid rgba(255,0,0,.4);border-radius:8px;color:#fff;text-decoration:none;font-size:16px;font-weight:500;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.home-youtube-link:hover{background:#ff00004d;border-color:#f009;transform:translateY(-2px);box-shadow:0 4px 12px #ff00004d}.home-youtube-link:active{transform:translateY(0)}.home-races{display:flex;flex-direction:column;gap:16px;width:100%;max-width:600px}.race-button{background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:12px;padding:20px 24px;color:#fff;cursor:pointer;transition:all .3s ease;text-align:left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%}.race-button:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.race-button:active{transform:translateY(0)}.race-button-name{font-size:20px;font-weight:700;margin-bottom:4px}.race-button-description{font-size:14px;opacity:.7}.race-button-test{border-color:#4a9eff80;background:#4a9eff1a}.race-button-test:hover{border-color:#4a9effb3;background:#4a9eff26}@media (max-width: 600px){.home-header h1{font-size:24px}.race-button{padding:16px 20px}.race-button-name{font-size:18px}}.elevation-profile{position:absolute;bottom:env(safe-area-inset-bottom,0px);left:0;background:transparent!important;border-top:1px solid rgba(255,255,255,.1);pointer-events:none;z-index:5}.elevation-profile svg{pointer-events:auto;background:transparent}.elevation-svg{width:100%;height:100%;display:block;background:transparent}.elevation-path{filter:drop-shadow(0 0 3px rgba(74,158,255,.5))}.elevation-marker{fill:#fff;stroke:#4a9eff;stroke-width:2;transition:all .3s ease}.elevation-marker.selected{fill:gold;stroke:gold;stroke-width:3;filter:drop-shadow(0 0 5px rgba(255,215,0,.8))}.distance-marker-circle{fill:#ffffff80;stroke:#4a9eff;stroke-width:2}.distance-marker-text{fill:#000;font-size:10px;font-weight:700;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.checkpoint-triangle{fill:#4cae4f;stroke:#2e7d32;stroke-width:1}.test-marker-circle{fill:#4cae4f;stroke:#2e7d32;stroke-width:3;opacity:.9;filter:drop-shadow(0 0 5px rgba(76,174,79,.8))}.participant-wrapper{position:absolute;transition:opacity .3s ease;--node-scale: 1}.participant-stats{position:absolute;color:#fff;text-align:center;font-size:calc(14px * var(--node-scale));white-space:nowrap;transform:translate(-50%,-75%);text-shadow:2px 2px 4px rgba(0,0,0,.8);z-index:15;pointer-events:none}.stat-name-and-number{font-size:calc(15px * var(--node-scale));margin-bottom:calc(2px * var(--node-scale));display:flex;align-items:center;gap:calc(4px * var(--node-scale))}.brickshitter-star{color:gold;font-size:calc(14px * var(--node-scale));line-height:1;filter:drop-shadow(0 0 2px rgba(255,215,0,.8))}.stat-row{display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--node-scale));font-size:calc(12px * var(--node-scale))}.stat-distance,.stat-position{opacity:.9}.participant-line{position:absolute;pointer-events:none;width:calc(2px * var(--node-scale))}.participant-portrait{position:absolute;width:calc(60px * var(--node-scale));height:calc(60px * var(--node-scale));min-width:calc(60px * var(--node-scale));min-height:calc(60px * var(--node-scale));cursor:pointer;z-index:20;transition:transform .2s ease;touch-action:none;-webkit-tap-highlight-color:transparent;pointer-events:auto}.participant-portrait:hover{transform:translate(-50%,-50%) scale(1.1)}.participant-portrait.selected{transform:translate(-50%,-50%) scale(1.15);z-index:25}.participant-dot{width:100%;height:100%;border-radius:50%;background:#fff;border:calc(3px * var(--node-scale)) solid #4a9eff;box-shadow:0 0 calc(10px * var(--node-scale)) #4a9eff99}.participant-portrait.selected .participant-dot{border-color:gold;box-shadow:0 0 15px #ffd700cc}.participant-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:calc(3px * var(--node-scale)) solid #4a9eff;box-shadow:0 0 calc(10px * var(--node-scale)) #4a9eff99;clip-path:circle(50% at 50% 50%)}.participant-portrait.selected .participant-avatar{border-color:gold;box-shadow:0 0 15px #ffd700cc}.participant-info-box{position:absolute;background:#000000e6;border:2px solid #4a9eff;border-radius:8px;padding:16px;min-width:350px;max-width:400px;z-index:1000;box-shadow:0 4px 12px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:14px;pointer-events:auto}.info-box-content{display:flex;gap:16px;align-items:flex-start}.info-box-portrait-section{flex-shrink:0}.info-box-portrait{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid #4a9eff;box-shadow:0 0 15px #4a9eff99;clip-path:circle(50% at 50% 50%)}.info-box-portrait-placeholder{width:120px;height:120px;border-radius:50%;background:#ffffff1a;border:4px solid #4a9eff;box-shadow:0 0 15px #4a9eff99}.info-box-text-section{flex:1;min-width:0}.info-box-close{position:absolute;top:8px;right:8px;background:transparent;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity .2s ease}.info-box-close:hover{opacity:1}.info-box-favorite{position:absolute;bottom:8px;left:8px;background:transparent;border:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;border-radius:4px;opacity:.2}.info-box-favorite:hover{background:#ffffff1a;transform:scale(1.1);opacity:.4}.info-box-favorite.active{color:gold;opacity:1}.info-box-favorite.active:hover{color:#ffed4e;background:#ffd7001a;opacity:1}.info-box-header{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.2)}.info-box-name{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:700;margin-bottom:4px}.info-box-flag{font-size:20px}.info-box-name-text{flex:1}.info-box-country{font-size:12px;opacity:.8;margin-top:4px}.info-box-details{display:flex;flex-direction:column;gap:8px}.info-box-row{display:flex;justify-content:space-between;align-items:center}.info-box-label{opacity:.8;font-weight:500}.info-box-value{font-weight:700;text-align:right}.unit-toggle{display:flex;gap:4px;background:#00000080;border-radius:20px;padding:4px;border:1px solid rgba(255,255,255,.2)}.toggle-option{padding:6px 16px;background:transparent;border:none;color:#fff9;font-size:14px;font-weight:500;cursor:pointer;border-radius:16px;transition:all .2s;min-width:50px}.toggle-option:hover{color:#fffc}.toggle-option.active{background:#fff3;color:#fff}.distance-markers-toggle{display:flex;align-items:center;gap:8px;background:#00000080;border-radius:20px;padding:6px 12px;border:1px solid rgba(255,255,255,.2)}.toggle-switch{position:relative;width:44px;height:24px;background:#fff3;border:none;border-radius:12px;cursor:pointer;transition:background .3s;padding:0}.toggle-switch.enabled{background:#4a9eff}.toggle-slider{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 2px 4px #0003}.toggle-label{color:#fff;font-size:12px;font-weight:500;-webkit-user-select:none;user-select:none}.favorites-toggle{display:flex;align-items:center;gap:8px}.favorites-toggle .toggle-switch{position:relative;width:44px;height:24px;background:#00000080;border:1px solid rgba(255,255,255,.3);border-radius:12px;cursor:pointer;transition:all .3s ease;padding:0;outline:none}.favorites-toggle .toggle-switch:hover{border-color:#ffffff80}.favorites-toggle .toggle-switch.enabled{background:#4a9eff99;border-color:#4a9eff}.favorites-toggle .toggle-slider{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.favorites-toggle .toggle-switch.enabled .toggle-slider{transform:translate(20px)}.favorites-toggle .toggle-label{color:#fff;font-size:13px;font-weight:500;-webkit-user-select:none;user-select:none}.retired-toggle{display:flex;align-items:center;gap:8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:6px 12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.toggle-label{color:#fff;font-size:12px;font-weight:500;-webkit-user-select:none;user-select:none;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.class-toggle{display:flex;align-items:center;gap:8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:6px 12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.toggle-switch{position:relative;width:44px;height:24px;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:12px;cursor:pointer;transition:all .3s ease;padding:0;outline:none}.toggle-switch.enabled{background:#4a9eff99;border-color:#4a9eff}.toggle-slider{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.toggle-switch.enabled .toggle-slider{transform:translate(20px)}.toggle-label{color:#fff;font-size:11px;font-weight:500;-webkit-user-select:none;user-select:none;text-shadow:1px 1px 2px rgba(0,0,0,.5);white-space:nowrap}.toggle-count{opacity:.8;font-size:11px}.settings-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;z-index:2000;animation:fadeIn .2s ease}.settings-menu-panel{position:fixed;top:0;right:0;width:280px;max-width:85vw;height:100vh;background:linear-gradient(to bottom,#1a1a1a,#000);z-index:2001;box-shadow:-2px 0 10px #00000080;animation:slideInRight .3s ease;overflow-y:auto}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.settings-menu-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid rgba(255,255,255,.1)}.settings-menu-header h2{color:#fff;font-size:20px;font-weight:600}.settings-menu-close{background:none;border:none;color:#fff;font-size:32px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.settings-menu-close:hover{background:#ffffff1a}.settings-menu-content{padding:10px 0}.settings-section{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}.settings-section:last-child{border-bottom:none}.settings-section-title{color:#fffc;font-size:14px;font-weight:600;text-transform:uppercase;padding:10px 20px;margin:0;letter-spacing:.5px}.settings-item{padding:12px 20px;display:flex;align-items:center;justify-content:space-between}.simulation-controls{position:absolute;top:15px;right:15px;z-index:1000;display:flex;align-items:center;gap:8px;background:#0009;border-radius:20px;padding:6px 12px;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-button{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:18px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.control-button:hover:not(:disabled){background:#ffffff4d;transform:scale(1.1)}.control-button:active:not(:disabled){transform:scale(.95)}.control-button:disabled{opacity:.3;cursor:not-allowed}.speed-selector{display:flex;gap:4px;background:#0000004d;border-radius:12px;padding:4px}.speed-button{padding:4px 10px;background:transparent;border:none;color:#fff9;font-size:11px;font-weight:500;cursor:pointer;border-radius:8px;transition:all .2s;min-width:40px}.speed-button:hover{color:#fffc;background:#ffffff1a}.speed-button.active{background:#4a9eff4d;color:#fff}.scroll-to-end-button{position:fixed;bottom:20px;right:20px;z-index:10000;background:#4a9effcc;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:24px;width:50px;height:50px;min-width:50px;min-height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 8px #0000004d}.scroll-to-end-button:hover{background:#4a9eff;transform:scale(1.1);box-shadow:0 6px 12px #0006}.scroll-to-end-button:active{transform:scale(.95)}.scroll-to-start-button{position:fixed;bottom:20px;left:20px;z-index:10000;background:#4a9effcc;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:24px;width:50px;height:50px;min-width:50px;min-height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 8px #0000004d}.scroll-to-start-button:hover{background:#4a9eff;transform:scale(1.1);box-shadow:0 6px 12px #0006}.scroll-to-start-button:active{transform:scale(.95)}.test-marker-input{position:absolute;top:70px;left:50%;transform:translate(-50%);z-index:1001;background:#000000e6;padding:10px 15px;border-radius:8px;border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #00000080}.test-marker-form{display:flex;gap:8px;align-items:center}.test-marker-input-field{padding:6px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:#fff;font-size:12px;min-width:250px;outline:none}.test-marker-input-field::placeholder{color:#ffffff80}.test-marker-input-field:focus{border-color:#4a9eff;background:#ffffff26}.test-marker-button{padding:6px 12px;background:#4a9effcc;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:#fff;font-size:12px;cursor:pointer;transition:all .2s;white-space:nowrap}.test-marker-button:hover{background:#4a9eff;transform:translateY(-1px)}.test-marker-button:active{transform:translateY(0)}.test-marker-clear{background:#ff4d4dcc}.test-marker-clear:hover{background:#ff4d4d}.youtube-video-container{position:absolute;top:15px;right:15px;z-index:1000;width:20%;max-width:20%;aspect-ratio:16 / 9;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;border:1px solid rgba(255,255,255,.2)}.youtube-video-close{position:absolute;top:4px;right:4px;z-index:1001;background:#000c;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:20px;font-weight:700;width:28px;height:28px;min-width:28px;min-height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);line-height:1;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.youtube-video-close:hover{background:#f00c;border-color:#ffffff80;transform:scale(1.1)}.youtube-video-close:active{transform:scale(.95)}.youtube-video-container:hover{transform:scale(1.05);box-shadow:0 6px 20px #000000b3}.youtube-video-wrapper{position:relative;width:100%;height:100%}.youtube-video-iframe{width:100%;height:100%;border:none;pointer-events:none}.youtube-video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0000004d;opacity:0;transition:opacity .2s ease;pointer-events:none}.youtube-video-container:hover .youtube-video-overlay{opacity:1}.youtube-video-click-hint{color:#fff;font-size:12px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.8);padding:8px 12px;background:#f00c;border-radius:4px;text-align:center}.youtube-video-loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;background:#000c}@media (max-width: 768px){.youtube-video-container{max-width:25%;top:10px;right:10px}.youtube-video-click-hint{font-size:10px;padding:6px 8px}}@media (max-width: 480px){.youtube-video-container{max-width:30%}}.race-display{width:100%;height:100%;min-width:var(--min-width, 600px);background:linear-gradient(to top,#1a1a1a,#000);position:relative;overflow:hidden;padding-bottom:env(safe-area-inset-bottom,0px);--control-scale: .5;--node-scale: 1;--top-buttons-scale: 1}.race-content-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;touch-action:pan-x;user-select:none;-webkit-user-select:none}.race-content{position:absolute;top:0;left:0;will-change:transform}.menu-toggle{position:absolute;top:15px;left:15px;z-index:1000;background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:24px;width:45px;height:45px;min-width:45px;min-height:45px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.settings-toggle{position:fixed;top:15px;right:15px;z-index:1001;background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;font-size:24px;width:auto;min-width:45px;height:45px;min-height:45px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;transition:all .2s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.settings-label{color:#fff;font-size:14px;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.8);white-space:nowrap}.settings-icon{font-size:24px;line-height:1}.settings-toggle:hover{background:#ffffff4d;transform:scale(1.05)}.timer-labels{position:fixed;top:70px;right:15px;z-index:1000;display:flex;flex-direction:column;gap:4px;align-items:flex-end}.timer-label{color:#fff;font-size:12px;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.8);white-space:nowrap;background:#00000080;padding:4px 8px;border-radius:4px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.race-title{position:absolute;top:calc(15px * var(--control-scale));left:50vw;transform:translate(-50%) scale(var(--control-scale));transform-origin:top center;z-index:999;color:#fff;font-size:calc(20px * var(--control-scale));font-weight:700;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.8);pointer-events:none;max-width:calc(100vw - 200px);padding:0 calc(10px * var(--control-scale));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drag-indicator{position:absolute;top:calc((60px + 20px) * var(--control-scale));left:50vw;transform:translate(-50%) scale(var(--control-scale));transform-origin:top center;z-index:999;color:#fff9;font-size:calc(16px * var(--control-scale));text-align:center;text-shadow:1px 1px 2px rgba(0,0,0,.8);pointer-events:none;white-space:nowrap;animation:fadeInOut 3s ease-in-out infinite}@keyframes fadeInOut{0%,to{opacity:.4}50%{opacity:.8}}.top-controls{position:absolute;top:calc(40px * var(--control-scale));left:50vw;transform:translate(-50%) scale(var(--top-buttons-combined-scale, var(--control-scale)));transform-origin:top center;z-index:1000;display:flex;align-items:center;gap:calc(8px * var(--control-scale));flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 20px);padding:0 calc(10px * var(--control-scale));box-sizing:border-box}.class-controls{position:absolute;top:calc(80px * var(--control-scale));left:50vw;transform:translate(-50%) scale(var(--top-buttons-combined-scale, var(--control-scale)));transform-origin:top center;z-index:1000;display:flex;align-items:center;gap:calc(6px * var(--control-scale));flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 20px);padding:0 calc(10px * var(--control-scale));box-sizing:border-box}.backend-offline-banner{position:absolute;top:calc(130px * var(--control-scale));left:50vw;transform:translate(-50%) scale(var(--control-scale));transform-origin:top center;background:#000000e6;border:calc(2px * var(--control-scale)) solid #ff0000;border-radius:calc(8px * var(--control-scale));padding:calc(12px * var(--control-scale)) calc(24px * var(--control-scale));color:red;font-size:calc(16px * var(--control-scale));font-weight:700;z-index:1001;box-shadow:0 calc(4px * var(--control-scale)) calc(12px * var(--control-scale)) #ff00004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}.menu-toggle:hover{background:#ffffff4d;transform:scale(1.05)}.menu-toggle:active{transform:scale(.95)}.participants-container{width:100%;position:relative;overflow:visible;z-index:1}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px}.checkpoint-annotation-wrapper{position:absolute;top:0;left:0;pointer-events:none;z-index:6}.checkpoint-annotation-line{position:absolute;width:1px;background:#4cae4f80;transform:translate(-50%)}.checkpoint-annotation-text{position:absolute;color:#4cae4f;font-size:11px;font-weight:600;white-space:nowrap;transform:translate(-50%,-50%);text-shadow:1px 1px 2px rgba(0,0,0,.8);padding:2px 6px;background:#00000080;border-radius:4px;border:1px solid rgba(76,174,79,.3)}@media (max-width: 768px){.race-title{font-size:16px;max-width:calc(100% - 100px);padding:0 5px}.top-controls{gap:6px;padding:0 5px}.class-controls{gap:4px;padding:0 5px}.menu-toggle{width:40px;height:40px;min-width:40px;min-height:40px;font-size:20px}}@media (max-width: 480px){.race-title{font-size:14px;max-width:calc(100% - 80px)}.top-controls{gap:4px}.class-controls{gap:3px}.backend-offline-banner{font-size:14px;padding:8px 16px;max-width:calc(100% - 20px)}}.menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;z-index:2000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.menu-panel{position:fixed;top:0;left:0;width:280px;max-width:85vw;height:100vh;background:linear-gradient(to bottom,#1a1a1a,#000);z-index:2001;box-shadow:2px 0 10px #00000080;animation:slideIn .3s ease;overflow-y:auto}@keyframes slideIn{0%{transform:translate(-100%)}to{transform:translate(0)}}.menu-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid rgba(255,255,255,.1)}.menu-header h2{color:#fff;font-size:20px;font-weight:600}.menu-close{background:none;border:none;color:#fff;font-size:32px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.menu-close:hover{background:#ffffff1a}.menu-content{padding:10px 0}.menu-item{width:100%;padding:16px 20px;background:none;border:none;text-align:left;cursor:pointer;transition:background .2s;border-bottom:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;gap:4px}.menu-item:hover{background:#ffffff1a}.menu-item.test-mode{border-bottom:2px solid rgba(74,158,255,.3)}.menu-item-home{border-bottom:2px solid rgba(255,255,255,.2)}.menu-item-youtube{border-bottom:2px solid rgba(255,0,0,.3)}.menu-item-label{color:#fff;font-size:16px;font-weight:500}.menu-item-desc{color:#fff9;font-size:12px}.app{width:100vw;height:100vh;position:relative;overflow:hidden}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;height:100vh;height:calc(100vh - env(safe-area-inset-bottom,0px));width:100vw;touch-action:pan-x pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;padding-bottom:env(safe-area-inset-bottom,0px)}#root{height:100vh;height:calc(100vh - env(safe-area-inset-bottom,0px));width:100vw}