:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;font-weight:400}#root{min-height:100vh}.timeline-canvas-container{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.8) 70%,transparent 100%);padding:40px 32px 32px;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}.timeline-canvas-inner{max-width:1400px;margin:0 auto;width:100%}.timeline-canvas-nav{display:flex;align-items:flex-end;gap:12px}.timeline-canvas-nav-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:50%;color:var(--text-secondary);cursor:pointer;transition:all .15s ease;flex-shrink:0;margin-bottom:18px}.timeline-canvas-nav-btn:hover{background:var(--bg-glass);color:var(--text-primary);border-color:var(--border-default)}.timeline-canvas-nav-btn:active{transform:scale(.95)}.timeline-canvas-nav-btn svg{width:18px;height:18px}.timeline-canvas-wrapper{flex:1;position:relative;height:116px;min-height:116px;overflow:visible}.timeline-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.timeline-canvas-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.timeline-canvas-legend{display:flex;gap:24px;user-select:none;-webkit-user-select:none}.timeline-canvas-legend-item{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-tertiary)}.timeline-canvas-legend-dot{width:8px;height:8px;border-radius:2px}.timeline-canvas-legend-dot.schoolwork{background:#30d158}.timeline-canvas-legend-dot.video-productive{background:#64d2ff}.timeline-canvas-legend-dot.video-unproductive{background:#5856d6}.timeline-canvas-legend-dot.games{background:#ff9f0a}.timeline-canvas-legend-dot.messaging{background:#bf5af2}.timeline-canvas-legend-dot.inactive{background:#2c2c2e}.timeline-canvas-count{font-size:12px;color:var(--text-tertiary)}@media(max-width:640px){.timeline-canvas-container{padding:24px 16px 16px}.timeline-canvas-nav{gap:8px}.timeline-canvas-nav-btn{width:32px;height:32px}.timeline-canvas-nav-btn svg{width:16px;height:16px}.timeline-canvas-footer{flex-direction:column;gap:12px;align-items:flex-start}.timeline-canvas-legend{gap:16px}}