* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background: #0a0a0a; color: #e0e0e0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

.green { color: #22c55e; }

/* Header */
.header {
    padding: 16px 24px;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid #1a1a1a;
}
.header h1 { font-size: 1.25em; font-weight: 600; }
.header a { color: #555; text-decoration: none; font-size: 0.9em; }
.header a:hover { color: #888; }

/* Bar chart primitives */
.bar-group {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; position: relative; height: 100%;
    justify-content: flex-end;
}
.bar {
    width: 100%; border-radius: 2px 2px 0 0;
    background: #22c55e33; min-height: 1px;
    transition: height 0.3s;
}
.bar.current { background: #22c55e; }
.bar.peak { background: #22c55e99; }
.bar-label {
    position: absolute; bottom: -18px;
    font-size: 0.65em; color: #555; white-space: nowrap;
}
.bar-group:hover .bar-tooltip { display: block; }
.bar-tooltip {
    display: none; position: absolute; top: -24px;
    background: #333; color: #fff; padding: 2px 6px;
    border-radius: 4px; font-size: 0.8em; white-space: nowrap;
    z-index: 10;
}