*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden}body{color:#fff;background-color:#0b1026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}#app{position:relative}#app canvas{display:block}.hud{pointer-events:none;text-shadow:0 1px 4px #000c;position:absolute;top:16px;left:16px}.hud h1{letter-spacing:.5px;font-size:1.2rem;font-weight:600}.hud p{margin-top:4px;font-size:.95rem}.hud .note{opacity:.6;font-size:.75rem}.hud .tier{color:#ff6b5e;margin-top:2px;font-size:1.35rem;font-weight:700}.hud .trade{color:#ffd166;margin-top:4px;font-size:.85rem}.hud .regret{color:#c4ccec;margin-top:2px;font-size:.85rem}.panel{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0e22d1;border:1px solid #ffffff1f;border-radius:10px;width:300px;max-width:calc(100% - 32px);padding:14px;position:absolute;top:16px;right:16px}.panel .panel-collapse{z-index:2;color:#ffffffb3;cursor:pointer;background:#ffffff1a;border:none;border-radius:6px;width:24px;height:24px;padding:0;font-size:1rem;line-height:1;position:absolute;top:8px;right:10px}.panel.min{width:auto;padding:6px 40px 6px 12px}.panel.min>:not(.panel-collapse){display:none}.panel .presets-label{text-transform:uppercase;letter-spacing:.6px;opacity:.75;margin-bottom:6px;font-size:.72rem}.panel .presets{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.panel .presets button{color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:999px;flex:none;padding:6px 10px;font-size:.78rem;font-weight:600}.panel .presets button:hover{background:#ff4b3e59}.panel .hint{color:#ffd166;opacity:.85;margin-top:8px;font-size:.72rem}.panel label{text-transform:uppercase;letter-spacing:.6px;opacity:.75;margin-bottom:10px;font-size:.72rem;display:block}.panel input{color:#fff;background:#ffffff14;border:1px solid #ffffff29;border-radius:6px;outline:none;width:100%;margin-top:4px;padding:8px 10px;font-size:.9rem;display:block}.panel input:focus{border-color:#ff4b3e}.panel .row{gap:8px;display:flex}.panel button{color:#fff;cursor:pointer;background:#ff4b3e;border:none;border-radius:6px;flex:1;padding:9px 10px;font-size:.85rem;font-weight:600}.panel button[name=ride]{width:100%;margin-bottom:8px;display:block}.panel button[name=share],.panel button[name=clip],.panel button[name=vertical]{background:#ffffff24}.panel .row button{padding:9px 6px;font-size:.78rem}.panel button:hover{filter:brightness(1.1)}.panel .status{min-height:1.1em;margin-top:10px;font-size:.8rem}.panel .status.error{color:#ff8a80}.panel .source{opacity:.55;margin-top:8px;font-size:.68rem}.mode-toggle{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0e22d1;border:1px solid #ffffff1f;border-radius:999px;padding:3px;display:flex;position:absolute;bottom:20px;left:16px}.mode-toggle button{color:#ffffffa6;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:7px 18px;font-size:.85rem;font-weight:600}.mode-toggle button.active{color:#fff;background:#ff4b3e}