*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#2a2a35;color:#fff;min-height:100vh;display:flex;justify-content:center;align-items:center}#app{display:flex;flex-direction:column;align-items:center;padding:20px;gap:20px}.controls{display:flex;flex-direction:column;align-items:center;gap:15px}.time-display{font-size:1.2em;color:#aaa;display:flex;align-items:center;gap:12px}.now-btn{padding:4px 12px;font-size:.8em;background:#334;color:#aaa;border:1px solid #556;border-radius:4px;cursor:pointer}.now-btn:hover{background:#445;color:#fff}.time-controls{display:flex;flex-direction:column;gap:8px}.time-control-row{display:flex;gap:8px;justify-content:center}.time-control-row button{padding:6px 12px;font-size:.85em;background:#223;color:#aaa;border:1px solid #445;border-radius:4px;cursor:pointer;min-width:70px}.time-control-row button:hover{background:#334;color:#fff;border-color:#668}.rotation-hint{color:#666;font-size:.85em;font-style:italic}.sky-container{position:relative}#sky-canvas{background:transparent}.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;max-width:600px}.legend-item{display:flex;align-items:center;gap:6px;font-size:.9em;color:#aaa;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .15s}.legend-item:hover{background-color:#ffffff1a;color:#fff}.legend-dot{width:12px;height:12px;border-radius:50%}