:root{--bg:#0d1117;--surface:#161b22;--surface-2:#1c232c;--surface-a:#161b22cc;--accent:#ff6b00;--accent-soft:#ff6b001f;--blue:#4a8fe7;--text:#f0f6fc;--text-mid:#b1bac4;--text-dim:#8b949e;--border:#30363d;--border-strong:#424a53;--radius:4px;--mono:"TX-02",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:"TX-02",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;height:100%;font-size:15px;line-height:1.5}button{font-family:inherit}.dropzone{display:flex;background:var(--bg);position:relative;outline-offset:-16px;border:2px dashed #0000;flex-direction:column;justify-content:center;align-items: center;width:100%;height:100%;transition:border-color .2s,background .2s}.dropzone--hover{border-color:var(--accent);outline:2px dashed var(--accent);background:#ff6b000a}.dropzone--loading{cursor:default}.dropzone-content{display:flex;pointer-events:auto;flex-direction:column;align-items: center;gap:22px}.dropzone-icon{color:var(--text-dim);transition:color .2s,transform .2s}.dropzone--hover .dropzone-icon{color:var(--accent);transform:scale(1.06)}.dropzone-title{letter-spacing:5px;color:var(--text);font-size:28px;font-weight:700;font-family:var(--mono);text-align:center}.dropzone-subtitle{color:var(--text-dim);letter-spacing:1.4px;text-transform:uppercase;font-size:14px;font-family:var(--mono)}.dropzone-actions{display:flex;gap:12px;margin-top:6px}.dropzone-progress{color:var(--accent);font-size:17px;font-weight:600;font-family:var(--mono);letter-spacing:1px}.dropzone-wip{position:absolute;font-family:var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:#f85149;text-align:center;white-space:nowrap;font-size:12px;font-weight:600;bottom:100px;left:50%;transform:translate(-50%)}.dropzone-discord{position:absolute;display:inline-flex;font-family:var(--mono);letter-spacing:1.5px;color:var(--text);text-decoration:none;background:#5865f21f;border:1px solid #5865f28c;border-radius:4px;align-items: center;gap:10px;padding:12px 22px;transition:background .15s,border-color .15s,transform .15s,color .15s;font-size:15px;font-weight:600;bottom:36px;left:50%;transform:translate(-50%)}.dropzone-discord:hover{color:#c7d0ff;background:#5865f238;border-color:#5865f2;transform:translate(-50%)translateY(-2px)}.dropzone-discord svg{color:#5865f2;flex-shrink:0}.dropzone-error{position:absolute;color:#f85149;text-align:center;font-size:14px;font-family:var(--mono);max-width:86%;line-height:1.4;bottom:64px}.dropzone-footer{position:absolute;display:flex;pointer-events:none;justify-content:center;align-items: center;gap:8px;bottom:28px;left:0;right:0}.dropzone-footer-text{letter-spacing:4px;color:var(--text-dim);font-size:12px;font-weight:600;font-family:var(--mono)}.spinner{border:3px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite;border-radius:50%;width:40px;height:40px}@keyframes spin{to{transform:rotate(360deg)}}.viewer{display:flex;background:var(--bg);flex-direction:column;width:100%;height:100%}.viewer-header{display:flex;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items: center;gap:18px;height:52px;padding:0 18px}.viewer-info{letter-spacing:1.2px;color:var(--text);font-size:14px;font-weight:500;font-family:var(--mono)}.viewer-version{color:var(--text-dim);font-size:12px;font-family:var(--mono);letter-spacing:.5px}.viewer-loading{font-family:var(--mono);color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;animation:pulse 1.2s ease-in-out infinite;font-size:12px;font-weight:600}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.viewer-error-backdrop{position:fixed;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;z-index:100;animation:error-fade-in .12s ease-out;background:#0d111773;justify-content:center;align-items: center;inset:0}.viewer-error-dialog{position:relative;background:var(--surface);display:flex;text-align:center;animation:error-pop-in .14s ease-out;border:1px solid #f8514980;border-radius:6px;flex-direction:column;align-items: center;min-width:360px;max-width:560px;padding:28px 32px 24px;box-shadow:0 12px 40px #0000008c,0 0 0 1px #f8514933}.viewer-error-dialog-close{position:absolute;color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:3px;padding:4px 8px;transition:color .12s,background .12s;font-family:inherit;font-size:22px;line-height:1;top:8px;right:10px}.viewer-error-dialog-close:hover{color:var(--text);background:#f8514926}.viewer-error-dialog-icon{color:#f85149;margin-bottom:10px;font-size:36px;line-height:1}.viewer-error-dialog-title{font-family:var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--text);margin-bottom:12px;font-size:15px;font-weight:700}.viewer-error-dialog-msg{font-family:var(--mono);color:var(--text-mid);overflow-wrap:break-word;word-break:break-word;white-space:pre-wrap;max-width:100%;margin-bottom:22px;font-size:13px;line-height:1.5}.viewer-error-dialog-ok{min-width:120px}@keyframes error-fade-in{0%{opacity:0}to{opacity:1}}@keyframes error-pop-in{0%{opacity:0;transform:scale(.96)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}.round-select{background:var(--surface-2);color:var(--text);border:1px solid var(--border);font-family:var(--mono);letter-spacing:.5px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%238b949e' d='M0 0l5 6 5-6z'/></svg>");background-position:right 10px center;background-repeat:no-repeat;border-radius:3px;height:30px;padding:0 28px 0 10px;transition:border-color .15s;font-size:13px;font-weight:600}.round-select:hover{border-color:var(--accent)}.round-select:disabled{opacity:.5;cursor:wait}.viewer-timer{color:var(--text);font-size:22px;font-weight:700;font-family:var(--mono);letter-spacing:1.5px;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:8px}.timer-phase{color:var(--accent);letter-spacing:2px;font-size:12px;font-weight:700}.viewer-body{display:flex;overflow:hidden;flex:1}.viewer-canvas-wrap{overflow:hidden;position:relative;flex:1}.viewer-canvas-wrap canvas{display:block}.info-panel{background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;position:relative;flex-shrink:0;width:340px;padding:4px 0}.info-resizer{position:absolute;cursor:ew-resize;z-index:5;background:0 0;width:6px;height:100%;transition:background .12s;top:0;left:-3px}.info-resizer:hover,.info-resizer:active{background:var(--accent);opacity:.6}.info-section{border-bottom:1px solid var(--border);padding:14px 18px}.info-section:last-child{border-bottom:none}.info-section-title{letter-spacing:2.5px;text-transform:uppercase;color:var(--text-dim);font-size:13px;font-weight:700;font-family:var(--mono);margin-bottom:10px}.player-row{display:flex;font-size:14px;font-family:var(--mono);align-items:baseline;gap:10px;padding:5px 0}.player-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600}.player-stats{color:var(--text-mid);font-variant-numeric:tabular-nums;flex-shrink:0;font-weight:500}.player-detail{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;max-width:100px;font-size:12px}.export-buttons{display:flex;flex-direction:column;gap:8px}.export-btn{letter-spacing:.6px;text-transform:none;width:100%;height:34px;font-size:12px}.export-btn:disabled{opacity:.55;cursor:wait;border-color:var(--border);color:var(--text-dim);background:0 0}.export-progress{font-family:var(--mono);color:var(--accent);letter-spacing:.4px;margin-top:2px;padding:2px 4px;font-size:11.5px}.event-feed{overflow-y:auto;display:flex;flex-direction:column;gap:2px;max-height:220px}.event-row{font-size:13px;font-family:var(--mono);color:var(--text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 0;line-height:1.45}.props-list{overflow-y:auto;display:flex;flex-direction:column;gap:1px;max-height:360px}.prop-row{display:flex;font-size:12px;font-family:var(--mono);flex-direction:column}.prop-row-head{display:flex;user-select:none;border-radius:2px;align-items:baseline;gap:8px;padding:3px 0;transition:background .1s}.prop-row--array .prop-row-head:hover{background:#ff6b000f}.prop-caret{color:var(--text-dim);display:inline-block;transform-origin:35% 50%;flex-shrink:0;width:10px;transition:transform .12s;font-size:10px}.prop-caret--open{transform:rotate(90deg)}.prop-key{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;min-width:96px;max-width:130px}.prop-val{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:500}.prop-row--array .prop-val{color:var(--accent);font-weight:600}.prop-list-items{list-style:none;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 18px;padding:0 0 0 8px}.prop-list-item{display:flex;align-items:baseline;gap:8px;padding:1px 0;font-size:11.5px}.prop-list-idx{color:var(--text-dim);font-variant-numeric:tabular-nums;text-align:right;opacity:.7;flex-shrink:0;min-width:22px;font-size:10px}.prop-list-val{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.controls{display:flex;background:var(--surface-a);backdrop-filter:blur(12px);border-top:1px solid var(--border);flex-shrink:0;align-items: center;gap:14px;height:64px;padding:0 20px}.btn{display:inline-flex;border:1px solid var(--border);color:var(--text);font-size:14px;font-weight:600;font-family:var(--mono);letter-spacing:.5px;cursor:pointer;clip-path:polygon(0 5px,5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px)100%,0 100%);background:0 0;justify-content:center;align-items: center;min-width:36px;height:36px;padding:0 14px;transition:border-color .15s,color .15s,background .15s}.btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.btn-small{min-width:32px;height:32px;padding:0 10px;font-size:13px}.btn-play{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);width:44px;min-width:44px;height:38px}.btn-play:hover{color:var(--accent);border-color:var(--accent);background:#ff6b0033}.speed-group{display:flex;gap:3px}.btn-speed{border-color:var(--border);clip-path:none;min-width:42px;height:32px;font-size:13px;font-weight:600}.btn-speed--active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.timeline-wrap{display:flex;position:relative;flex:1;align-items: center;min-width:0}.timeline-track{position:relative;display:flex;cursor:pointer;touch-action:none;align-items: center;width:100%;height:22px}.timeline-track:before{content:"";position:absolute;background:var(--border);border-radius:3px;height:6px;top:50%;left:0;right:0;transform:translateY(-50%)}.timeline-prep{position:absolute;pointer-events:none;background:#e3b34180;border-radius:3px 0 0 3px;height:6px;top:50%;left:0;transform:translateY(-50%)}.timeline-progress{position:absolute;background:var(--accent);pointer-events:none;border-radius:3px;height:6px;top:50%;left:0;transform:translateY(-50%);box-shadow:0 0 8px #ff6b0059}.timeline-thumb{position:absolute;background:var(--accent);border:2px solid var(--bg);pointer-events:none;border-radius:50%;width:14px;height:14px;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 6px #ff6b0073}.timeline-track--dragging{cursor:grabbing}.timeline-marker{position:absolute;cursor:pointer;z-index:2;background:#f85149;border:none;border-radius:2px;width:6px;height:20px;margin:0;padding:0;transition:transform .1s,box-shadow .1s;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0d1117d9}.timeline-marker:hover{z-index:3;transform:translate(-50%,-50%)scaleX(1.6)}.timeline-popover{position:absolute;color:var(--text);font-family:var(--mono);border:1px solid var(--border-strong);white-space:nowrap;pointer-events:none;z-index:10;overflow:hidden;text-overflow:ellipsis;background:#0d1117f5;border-radius:4px;max-width:380px;padding:6px 10px;font-size:12px;bottom:calc(100% + 6px);left:0;transform:translate(-50%);box-shadow:0 4px 14px #0006}.timeline-popover--prep{color:#e3b341;letter-spacing:1.2px;text-transform:uppercase;border-color:#e3b341b3;padding:5px 9px;font-size:11px;font-weight:700}.timeline-popover-row{display:flex;align-items: center;gap:6px;line-height:1.5}.timeline-popover-dot{display:inline-block;border-radius:50%;flex-shrink:0;width:7px;height:7px}.tick-display{color:var(--text-mid);font-size:13px;font-weight:500;font-family:var(--mono);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.5px;min-width:170px}.hover-tooltip{font-family:var(--mono);border-width:1.5px!important;border-radius:4px!important;padding:10px 12px!important;font-size:13px!important;line-height:1.5!important}.hover-tooltip .hover-name{letter-spacing:.3px;margin-bottom:4px;font-size:14px;font-weight:700}.hover-tooltip .hover-op{color:var(--text-mid);margin-bottom:4px;font-size:12px}.hover-tooltip .hover-coord{font-variant-numeric:tabular-nums;color:var(--text-mid);font-size:12px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border:2px solid var(--surface);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}