*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:background-color .3s ease;overflow:hidden;background-color:#f5f5f5;color:#1f2937}body.safe #status{color:#22c55e}body.avoid #status{color:#ef4444}body.off-hours #status{color:#6b7280}#app{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem}.container{text-align:center;width:100%;max-width:600px}#status{font-size:clamp(2rem,8vw,4rem);font-weight:700;margin-bottom:2rem;text-transform:uppercase;letter-spacing:.05em}#timer{font-size:clamp(3rem,12vw,6rem);font-weight:700;margin-bottom:3rem;font-variant-numeric:tabular-nums}#clock{font-size:clamp(1rem,4vw,1.5rem);opacity:.8;font-variant-numeric:tabular-nums}.timeline-container{margin-top:4rem;width:100%;max-width:100%}.timeline-header{font-size:clamp(.875rem,3vw,1.125rem);font-weight:600;margin-bottom:1rem;opacity:.9;text-transform:uppercase;letter-spacing:.05em}.timeline{position:relative;width:100%;height:60px;background-color:#e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000001a;border:2px solid #d1d5db}.timeline-track{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}.timeline-segment{height:100%;transition:opacity .3s ease;border-right:1px solid rgba(0,0,0,.1)}.timeline-segment:last-child{border-right:none}.timeline-segment.safe{background-color:#22c55e}.timeline-segment.avoid{background-color:#ef4444}.timeline-segment.off-hours{background-color:#6b728099}.timeline-segment.active{box-shadow:inset 0 0 0 3px #0006;z-index:1;position:relative}.timeline-marker{position:absolute;top:-8px;width:4px;height:calc(100% + 16px);background-color:#1f2937;border-radius:2px;box-shadow:0 2px 8px #0000004d;transition:left 1s linear;z-index:2}.timeline-marker:before{content:"";position:absolute;top:-4px;left:50%;transform:translate(-50%);width:12px;height:12px;background-color:#1f2937;border-radius:50%;box-shadow:0 2px 6px #0000004d;border:2px solid #f5f5f5}.timeline-marker:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:12px;height:12px;background-color:#1f2937;border-radius:50%;box-shadow:0 2px 6px #0000004d;border:2px solid #f5f5f5}.timeline-labels-top,.timeline-labels-bottom{position:relative;width:100%;height:2rem;font-size:clamp(.65rem,2vw,.75rem);font-variant-numeric:tabular-nums}.timeline-labels-top{margin-bottom:.5rem}.timeline-labels-bottom{margin-top:.5rem}.period-label{position:absolute;white-space:nowrap;opacity:.9;font-weight:500;transform:translate(-50%);text-align:center;padding:.25rem .5rem;background-color:#0000000d;border-radius:4px;transition:all .3s ease}.period-label.safe{color:#16a34a}.period-label.avoid{color:#dc2626}.period-label.active{font-weight:700;transform:translate(-50%) scale(1.1);opacity:1;background-color:#0000001f;box-shadow:0 2px 6px #00000026}.period-label.safe.active{color:#15803d;background-color:#22c55e26}.period-label.avoid.active{color:#b91c1c;background-color:#ef444426}body.off-hours .timeline-container{opacity:.5}@media(max-width:480px){.timeline{height:50px}.timeline-container{margin-top:3rem}}