:root {  --bg-colour: #f8f9fa;  --text-colour: #1a1a1a;  --secondary-text: rgba(26, 26, 26, 0.6);  --status-synced: #2e7d32;  --status-offline: #ed6c02;  --accent: #000000;}[data-theme="dark"] {  --bg-colour: #0a0a0a;  --text-colour: #ffffff;  --secondary-text: rgba(255, 255, 255, 0.5);  --status-synced: #66bb6a;  --status-offline: #ffa726;  --accent: #ffffff;}body {  font-family: system-ui, -apple-system, sans-serif;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  height: 100vh;  margin: 0;  background-color: var(--bg-colour);  color: var(--text-colour);  transition: background-color 0.5s, color 0.5s;  overflow: hidden;}.nav-container {  margin-bottom: 2rem;  display: flex;  gap: 2rem;  z-index: 10;}.nav-btn {  background: none;  border: none;  color: var(--secondary-text);  font-size: 1rem;  font-weight: 700;  letter-spacing: 0.2em;  cursor: pointer;  transition: color 0.3s, transform 0.2s;  padding: 10px;  text-transform: uppercase;}.nav-btn:hover, .nav-btn.active {  color: var(--text-colour);}.nav-btn.active {  border-bottom: 2px solid var(--text-colour);}.view-section {  display: none;  flex-direction: column;  align-items: center;  justify-content: center;  width: 100%;}.view-section.active {  display: flex;}h1, .tool-display {  margin: 0;  font-size: 20vw;  font-weight: 800;  line-height: 1;  letter-spacing: -0.04em;  font-variant-numeric: tabular-nums;  white-space: nowrap;}#date {  font-size: 4vw;  font-weight: 300;  text-transform: uppercase;  letter-spacing: 0.15em;  color: var(--secondary-text);}.controls {  margin-top: 3rem;  display: flex;  gap: 1rem;  align-items: center;}.tool-input {  background: transparent;  border: 1px solid var(--secondary-text);  color: var(--text-colour);  padding: 12px;  border-radius: 8px;  width: 120px;  font-size: 1.2rem;  text-align: center;  outline: none;}.tool-input:focus {  border-color: var(--text-colour);}.btn {  position: fixed;  top: 2rem;  right: 2rem;  background: transparent;  border: 1px solid var(--secondary-text);  color: var(--text-colour);  padding: 8px 16px;  border-radius: 50px;  cursor: pointer;  font-size: 0.8rem;  text-transform: uppercase;  transition: all 0.3s;}.btn:hover {  background: var(--text-colour);  color: var(--bg-colour);}.action-btn {  background: var(--text-colour);  color: var(--bg-colour);  border: 1px solid var(--text-colour);  padding: 12px 30px;  border-radius: 50px;  font-weight: 700;  letter-spacing: 0.1em;  cursor: pointer;  transition: opacity 0.2s;}.action-btn-outline {  background: transparent;  border: 1px solid var(--secondary-text);  color: var(--text-colour);}.action-btn:hover {  opacity: 0.8;}.footer-info {  position: fixed;  bottom: 2rem;  text-align: center;}#status {  font-size: 1rem;  letter-spacing: 0.2em;  font-weight: 600;}#lastSync {  font-size: 0.7rem;  color: var(--secondary-text);  margin-top: 0.4rem;}.status-synced { color: var(--status-synced) !important; }.status-offline { color: var(--status-offline) !important; }@keyframes sync-pulse {  50% { transform: scale(1.1); filter: brightness(1.2); }}.pulse-animation {  animation: sync-pulse 0.6s ease-out;}@media (orientation: landscape) and (max-height: 500px) {  body {    padding: 10px 0;    justify-content: flex-start;    overflow-y: auto;  }  .nav-container {    margin-bottom: 1rem;    gap: 1rem;  }  h1, .tool-display {    font-size: 35vh;    letter-spacing: -0.02em;  }  #date {    font-size: 4vh;  }  .controls {    margin-top: 1rem;    flex-direction: row;    transform: scale(0.9);  }  .btn {    top: 1rem;    right: 1rem;    padding: 5px 10px;    font-size: 0.6rem;  }  .footer-info {    position: relative;    margin-top: 2rem;    bottom: 0;  }}