:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #09090b;
  color: #f8f8fa;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }

.dashboard {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.dashboard-art { display: block; width: 100%; height: 100%; object-fit: fill; }

.dashboard-status {
  position: absolute;
  inset: 0 0 auto 72.2%;
  height: 7.3%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: max(1.5vw, env(safe-area-inset-right));
  background: linear-gradient(90deg, transparent, #080809 2%, #080809);
  font-size: clamp(12px, 3.7dvh, 38px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scanner {
  position: absolute;
  inset: 94.5% 36.4% auto;
  height: 1.65%;
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(90deg, #0d0607, #380405 25% 75%, #0d0607);
  pointer-events: none;
}

.scanner::before,
.scanner::after {
  content: "";
  position: absolute;
  inset: 0;
}

.scanner::before {
  right: auto;
  width: 50%;
  background: linear-gradient(90deg, #c20b05, #ff2516 22%, #ff6d4b 50%,
    #ff2516 78%, #c20b05);
  transform: translateX(40%);
}

.scanner::after {
  background: repeating-linear-gradient(90deg, transparent 0 9.4%, #110506 9.4% 10%);
  box-shadow: inset 0 0 3px #130505;
}

@keyframes scanner-sweep {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: no-preference) {
  .scanner::before { animation: scanner-sweep 0.78s steps(6, jump-none) infinite alternate; }
}

.shortcuts { position: absolute; inset: 0; }
.shortcut {
  position: absolute;
  top: 69.6%;
  height: 20.4%;
  width: 22.9%;
  display: grid;
  place-items: center;
  border-radius: 12% / 24%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.shortcut span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.maps { left: max(2%, env(safe-area-inset-left)); right: 75.1%; width: auto; }
.spotify { left: 26.4%; }
.smart { left: 50.8%; width: 23.2%; }
.vehicle { left: 75.5%; right: max(1.6%, env(safe-area-inset-right)); width: auto; }
.shortcut:focus-visible { outline: 3px solid white; outline-offset: 2px; }
.shortcut:active { background: #ffffff25; }

.rotate-notice { display: none; }

@media (orientation: portrait) {
  .dashboard, .journal { display: none; }
  .rotate-notice {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 24px;
    text-align: center;
  }
}

.journal {
  width: min(100%, 740px);
  margin-inline: auto;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.journal p { color: #c4c4cb; }
.journal form, .journal li {
  background: #16161b;
  border: 1px solid #393940;
  border-radius: 12px;
  padding: 16px;
}
.journal form { display: grid; gap: 12px; }
.journal label { display: grid; gap: 4px; }
.journal input, .journal textarea, .journal button {
  min-width: 0;
  min-height: 44px;
  font: inherit;
  padding: 8px 12px;
  color: inherit;
  background: #0b0b10;
  border: 1px solid #6d6d79;
  border-radius: 7px;
}
.journal textarea { resize: vertical; }
.journal button { background: #a21924; border-color: #ff6268; cursor: pointer; }
.journal ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.journal li { white-space: pre-wrap; overflow-wrap: anywhere; }
.journal li strong { display: block; }