:root{--color-bg: #0e1116;--color-surface: #151a21;--color-surface-2: #1a2029;--color-surface-3: #20262f;--color-divider: #232a33;--color-border: #2a323d;--color-text: #e6e9ee;--color-text-muted: #98a2b0;--color-text-faint: #5c6674;--color-accent: #66c0f4;--color-accent-dim: #3d7ea8;--color-online: #4cc3ff;--color-away: #a87f35;--color-snooze: #7a6fa8;--color-busy: #9c5a68;--color-offline: #3d4653;--color-unknown: #3a4250;--text-xs: clamp(.75rem, .7rem + .25vw, .875rem);--text-sm: clamp(.875rem, .8rem + .35vw, 1rem);--text-base: clamp(1rem, .95rem + .25vw, 1.125rem);--text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--font-body: "General Sans", "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;--transition-interactive: .16s cubic-bezier(.16, 1, .3, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100dvh;line-height:1.55;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:radial-gradient(1200px 500px at 80% -10%,rgba(102,192,244,.05),transparent 60%),var(--color-bg)}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}input,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}.app{max-width:1180px;margin:0 auto;padding:var(--space-5) var(--space-5) var(--space-16)}.masthead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5)}.brand{display:flex;align-items:center;gap:var(--space-3)}.brand-icon{border-radius:8px}.brand-name{font-size:var(--text-lg);font-weight:700;letter-spacing:-.01em}.brand-sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:-2px}.health{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-muted);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-full, 999px);background:var(--color-surface)}.health-dot{width:8px;height:8px;border-radius:50%;flex:none}.health-dot.ok{background:var(--color-online);box-shadow:0 0 8px #3fb95080}.health-dot.warn{background:var(--color-away)}.health-dot.error{background:var(--color-busy)}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums}.chip-avatar-link{display:inline-flex;border-radius:var(--radius-sm)}.chip-avatar-link:hover{outline:1px solid var(--color-accent)}.players{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-5)}.player-chip{cursor:pointer;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-muted);transition:border-color var(--transition-interactive),background var(--transition-interactive),color var(--transition-interactive);min-width:0}.player-chip:hover{border-color:var(--color-accent-dim);color:var(--color-text)}.player-chip.active{border-color:var(--color-accent);background:var(--color-surface-3);color:var(--color-text)}.player-chip img{width:26px;height:26px;border-radius:var(--radius-sm);background:var(--color-surface-3)}.player-chip .fallback-avatar{width:26px;height:26px;border-radius:var(--radius-sm);background:var(--color-surface-3);display:grid;place-items:center;font-size:var(--text-xs);font-weight:600;color:var(--color-accent)}.chip-now{font-size:var(--text-xs);color:var(--color-text-faint);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-now .game{color:var(--color-accent)}.controls{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}.seg{display:flex;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface)}.seg button{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted);transition:background var(--transition-interactive),color var(--transition-interactive)}.seg button:hover{color:var(--color-text)}.seg button.active{background:var(--color-surface-3);color:var(--color-accent)}.nav-btn{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-muted);font-size:var(--text-sm);transition:border-color var(--transition-interactive),color var(--transition-interactive)}.nav-btn:hover:not(:disabled){border-color:var(--color-accent-dim);color:var(--color-text)}.nav-btn:disabled{opacity:.4;cursor:default}.tz-select{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-muted);font-size:var(--text-sm)}.range-label{font-size:var(--text-sm);color:var(--color-text-muted);margin-left:auto}.stat-cards{display:flex;gap:var(--space-3);margin-left:auto;flex-wrap:wrap}.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);min-width:120px}.stat-label{font-size:var(--text-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.06em}.stat-value{font-size:var(--text-sm);color:var(--color-text);white-space:nowrap}.stat-unit{color:var(--color-text-faint);font-size:var(--text-xs)}.legend-link{color:var(--color-text-faint);text-decoration:none;font-size:var(--text-xs);padding:0 var(--space-1);border-radius:var(--radius-sm)}.legend-link:hover{color:var(--color-accent)}.demo-banner{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:1px solid rgba(245,166,35,.35);background:#f5a62314;border-radius:var(--radius-md);color:var(--color-away);font-size:var(--text-sm);margin-bottom:var(--space-4)}.chart-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-4) var(--space-5)}.chart-card-empty{display:grid;place-items:center;min-height:240px;color:var(--color-text-muted);font-size:var(--text-sm)}.timeline-wrap{display:flex;gap:var(--space-2)}.timeline-chart{flex:1;min-width:0}.totals-col{width:58px;flex:none;display:flex;flex-direction:column}.totals-spacer-top{height:26px;flex:none}.totals-row{display:flex;align-items:center;justify-content:flex-end;font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap}.totals-row.none{color:var(--color-text-faint)}.chart-footnote{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-4);line-height:1.8}.legend{display:flex;align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);background:var(--color-surface-2)}.legend-title{font-size:var(--text-xs);color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.06em}.legend-item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:color var(--transition-interactive),background var(--transition-interactive)}button.legend-item:hover{color:var(--color-text);background:var(--color-surface-3)}.legend-swatch{width:12px;height:12px;border-radius:3px;flex:none}.legend-swatch.hatched{background:repeating-linear-gradient(-45deg,var(--color-unknown),var(--color-unknown) 2px,transparent 2px,transparent 4px);border:1px solid var(--color-text-faint)}.legend-item.muted{opacity:.35}.skeleton{border-radius:var(--radius-md);background:linear-gradient(90deg,var(--color-surface-2) 25%,var(--color-surface-3) 50%,var(--color-surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite linear}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media (max-width: 640px){.timeline-wrap{flex-direction:column}.totals-col{display:none}}