:root{color-scheme:light dark;--bg: #fafafa;--bg-elev: #ffffff;--fg: #111;--muted: #666;--border: #d6d6d6;--accent: #c5462a;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme: dark){:root{--bg: #161616;--bg-elev: #1f1f1f;--fg: #eaeaea;--muted: #999;--border: #2f2f2f;--accent: #ff7a55}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg)}.topbar{padding:1rem 1.25rem;border-bottom:1px solid var(--border)}.topbar h1{margin:0;font-size:1.1rem;letter-spacing:.02em}.topbar h1 a{color:inherit;text-decoration:none}.topbar h1 a:hover{color:var(--accent)}.topbar p{margin:.25rem 0 0}.muted{color:var(--muted)}.small{font-size:.85rem}main{max-width:1200px;margin:0 auto;padding:1rem 1.25rem 4rem}main>section{margin-top:1.5rem}.drop-zone{border:2px dashed var(--border);border-radius:8px;background:var(--bg-elev);padding:2rem;text-align:center;transition:border-color .12s}.drop-zone.is-over{border-color:var(--accent)}.share-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;margin-top:.75rem}.share-btn{background:var(--accent);color:var(--bg);border:none;border-radius:4px;padding:.4rem .8rem;font-size:.85rem;cursor:pointer}.share-btn:hover{filter:brightness(1.1)}.recent-replays{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:1rem 1.25rem}.recent-replays h2{margin:0 0 .25rem;font-size:1rem}#recent-replays-list{display:flex;flex-direction:column;gap:.4rem;margin-top:.75rem}.recent-replays-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem 1rem;align-items:stretch;padding:.65rem .85rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:inherit;cursor:pointer;text-align:left;font:inherit;transition:border-color .12s,background .12s}.recent-replays-row:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--bg))}.recent-replays-row>div{display:flex;flex-direction:column;gap:.1rem;min-width:0}.recent-replays-cell-label{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}.recent-replays-cell-value{font-size:.95rem;overflow-wrap:anywhere}.recent-replays-pagination{display:flex;align-items:center;gap:.75rem;justify-content:flex-end;margin-top:.85rem}.recent-replays-pagination button{background:var(--bg);color:inherit;border:1px solid var(--border);border-radius:4px;padding:.3rem .7rem;font-size:.85rem;cursor:pointer}.recent-replays-pagination button:hover:not(:disabled){border-color:var(--accent)}.recent-replays-pagination button:disabled{opacity:.4;cursor:not-allowed}.recent-replays-page-indicator{color:var(--muted);font-size:.85rem}.share-link{font-size:.8rem;color:var(--muted);background:var(--bg);padding:.25rem .5rem;border-radius:4px;border:1px solid var(--border);word-break:break-all}.link{color:var(--accent);text-decoration:underline;cursor:pointer}#summary{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:1rem 1.25rem}#summary h2{margin:0 0 .5rem;font-size:1rem}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem 1rem}.summary-grid>div{min-width:0;overflow-wrap:anywhere}.summary-grid div span:first-child{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.mode-toggle{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:var(--bg-elev)}.mode-btn{font:inherit;background:transparent;border:none;padding:.4rem .9rem;color:var(--muted);cursor:pointer}.mode-btn.active{background:var(--accent);color:#fff}.breadcrumb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.75rem;font-size:.9rem}.breadcrumb .crumb{background:var(--bg-elev);border:1px solid var(--border);border-radius:999px;padding:.2rem .7rem;display:inline-flex;gap:.4rem;align-items:center}.breadcrumb .crumb .label{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}.breadcrumb .crumb button{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:0;font:inherit;line-height:1}.breadcrumb .crumb button:hover{color:var(--accent)}.breadcrumb .arrow{color:var(--muted)}.section-title{margin:1.25rem 0 .5rem;font-size:.95rem;font-weight:600;color:var(--fg)}.section-hint{margin:0 0 .5rem;color:var(--muted);font-size:.85rem}button{cursor:pointer}#charts h2,#tables h2{margin:0 0 .5rem;font-size:1rem}#dps-chart,.stats-chart{background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:.5rem}.stats-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:1rem 1.25rem;margin-top:1.25rem}#explorer>div:not(:empty){margin-top:1.25rem}#explorer>div:empty{margin-top:0}.stats-card h2{margin:0 0 .75rem;font-size:1rem}.stats-cell-hint{display:block!important;color:var(--muted);font-size:.7rem;margin-top:.1rem}.brush-host{position:relative}.dps-analysis-legend{display:flex;align-items:center;gap:.4rem;margin-top:.5rem;font-size:.85rem;color:var(--muted)}.dps-analysis-legend-dot{display:inline-block;width:12px;height:12px;margin-left:.75rem;margin-right:.25rem}.dps-analysis-legend-dot--damage{background:var(--accent);border-radius:50%}.dps-analysis-legend-dot--chat{width:4px;height:16px;background:#1f77b48c}@media (prefers-color-scheme: dark){.dps-analysis-legend-dot--chat{background:#62a4d98c}}.uplot .u-select{background:color-mix(in srgb,var(--accent) 22%,transparent);border-left:1px solid var(--accent);border-right:1px solid var(--accent)}.brush-actions{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.85rem;color:var(--muted)}.brush-actions button{font:inherit;padding:.2rem .6rem;border:1px solid var(--border);background:var(--bg-elev);color:var(--fg);border-radius:4px}.status-list{display:flex;flex-direction:column;gap:.3rem}.status-row{display:grid;grid-template-columns:minmax(10em,18em) 1fr minmax(6em,max-content);gap:.6rem;font-size:.9rem}.status-row .uptime-bar{background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:4px;position:relative;height:1.2em;overflow:hidden}.status-row .uptime-fill{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:4px}.status-row .uptime-value{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}.bar-chart{display:flex;flex-direction:column;gap:.35rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:.6rem .75rem}.bar-row{display:grid;grid-template-columns:minmax(8em,28em) minmax(6em,1fr) max-content;gap:.6rem;align-items:center;font-size:.9rem}.bar-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a.bar-label,a.bar-label-link,a.cell-link{color:inherit;text-decoration:none}.mob-skills-filter{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 .75rem;font-size:.85rem}.mob-skills-filter label{color:var(--muted)}.mob-skills-filter select{background:var(--bg);color:inherit;border:1px solid var(--border);border-radius:4px;padding:.2rem .4rem;font-size:.85rem}a.bar-label:hover,a.bar-label-link:hover,a.cell-link:hover{color:var(--accent);text-decoration:underline}.bar-track{position:relative;height:1.4em;background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:4px;overflow:hidden}.bar-fill{position:absolute;inset:0 auto 0 0;border-radius:4px;transition:width .18s ease-out}.bar-value{font-variant-numeric:tabular-nums;text-align:right;color:var(--muted)}table{width:100%;border-collapse:collapse;background:var(--bg-elev);font-size:.9rem}th,td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid var(--border)}th{cursor:pointer;user-select:none;background:color-mix(in srgb,var(--bg-elev) 80%,var(--border));position:sticky;top:0}th.sorted:after{content:" ▾";color:var(--muted)}th.sorted.asc:after{content:" ▴"}tr.clickable{cursor:pointer}tr.clickable:hover td{background:color-mix(in srgb,var(--accent) 10%,var(--bg-elev))}tr.selected td{background:color-mix(in srgb,var(--accent) 22%,var(--bg-elev))}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.table-wrap{border:1px solid var(--border);border-radius:6px;max-height:360px;overflow:auto}
