.statusbar { position: relative; flex: 0 0 7.4%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 7.5%; font-size: 15px; font-weight: 650; }
.clock { letter-spacing: -.4px; padding-left: 3px; }
.island { position: absolute; width: 28%; height: 30px; top: 12px; left: 36%; border-radius: 30px; background: #03070c; box-shadow: inset 0 0 3px #000; }
.island span { position: absolute; width: 8px; height: 8px; right: 12px; top: 11px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #193658, #07101e 60%); }
.status-icons { display: flex; align-items: center; gap: 5px; }
.status-icons svg { width: 16px; height: 14px; }
.status-icons .battery { width: 25px; }
.app-header { flex: 0 0 7.3%; min-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--rand); }
.wordmark { color: #f0f5ff; display: inline-flex; align-items: center; font-size: clamp(23px, 6cqw, 27px); font-weight: 650; letter-spacing: -1.15px; }
.wordmark > svg { width: 26px; height: 26px; margin-right: 9px; color: #8edeea; }
.wordmark > span { color: #87d9df; }