html,body{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:20px;background:#0a0a0a;color:#e0e0e0;position:relative}.container{max-width:1400px;margin:0 auto;position:relative;z-index:1}h1{color:#000;margin-bottom:30px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:30px}@media (max-width: 768px){.grid{grid-template-columns:1fr;gap:20px}}.panel{background:#1a1a1ad9;border-radius:12px;padding:20px;box-shadow:0 4px 6px #0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.panel h2{margin-top:0;color:#ecddb1;font-size:1.2em}.timeline-panel{position:relative}.timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.timeline-header h2{margin:0}.status-indicator-wrapper{display:flex;align-items:center;gap:8px;font-size:.9em}.status-text{color:#888;font-size:.9em}.timeline-footer{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.capture-button{margin:0}.timelapse-container{position:relative;background:#000;border-radius:8px;overflow:hidden}.timelapse-image{width:100%;height:auto;display:block}.timeline-scrubber{width:100%;margin-top:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:#333;border-radius:3px;outline:none}.timeline-scrubber::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#ecddb1;border-radius:50%;cursor:pointer}.control-button{background:#ecddb1;color:#0a0a0a;border:none;padding:12px 24px;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-right:10px}.control-button:hover{background:#95f33c;transform:translateY(-2px)}.control-button:active{transform:translateY(0)}.control-button.danger{background:#e74c3c;color:#fff}.control-button.danger:hover{background:#c0392b}.status-indicator{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:middle}.status-indicator.online{background:#95f33c;animation:pulse 2s infinite}.status-indicator.offline{background:#e74c3c}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.readings-display{font-size:2em;font-weight:300;color:#ecddb1;margin:20px 0}.timestamp{font-size:.9em;color:#666;margin-top:10px}canvas{max-height:300px;display:block}canvas+canvas{margin-top:20px}.environment-display{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.env-metric{background:#ffc1071a;padding:15px;border-radius:8px;text-align:center}.env-metric .value{font-size:2em;font-weight:300;color:#ecddb1}.env-metric .label{font-size:.9em;color:#888;margin-top:5px}@media (max-width: 768px){*{box-sizing:border-box}html,body{width:100%;max-width:100%;overflow-x:hidden}body{padding:4px}.container{max-width:100%;width:100%;padding:0}h1{font-size:1.3em;margin-bottom:12px;padding:0 2px}.panel{padding:10px;width:100%;max-width:100%}.panel h2{font-size:1em}.readings-display,.env-metric .value{font-size:1.4em}.video-background-iframe{transform:scale(4)!important}.environment-display{grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.env-metric{padding:10px}.env-metric .label{font-size:.85em}canvas{max-height:200px;width:100%}.timelapse-container{min-height:180px;width:100%}.timelapse-image{width:100%;max-width:100%;height:auto}.control-button{font-size:.85em;padding:8px 12px}.timeline-header{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.timeline-header h2{font-size:1em;margin:0}.status-indicator-wrapper{font-size:.8em;flex-shrink:0}.status-text{font-size:.8em}.timeline-footer{flex-direction:column;align-items:stretch;gap:10px;margin-top:12px}.capture-button{width:100%}.timestamp{font-size:.85em}.grid{gap:12px;margin-bottom:12px}.environment-display{gap:8px;margin:12px 0}.timeline-header{margin-bottom:10px}.timeline-footer{margin-top:10px}}