html, body { height: 100%; margin: 0; }
.ls { overflow: hidden; background: var(--lucid-bg) var(--lisa-desktop); color: var(--lucid-ink); font-family: var(--lucid-font-chicago); -webkit-font-smoothing: none; cursor: default; }
.ls-noscript { margin: 40px; font-size: 18px; }

.ls-bar { position: fixed; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; gap: 22px; height: 28px; padding: 0 14px; background: var(--lucid-bg); box-shadow: inset 0 -1px 0 var(--lucid-ink); font-size: 15px; user-select: none; -webkit-user-select: none; }
.ls-bar-mark { display: grid; place-items: center; width: 20px; height: 20px; }
.ls-bar-mark img { display: block; width: 18px; height: 18px; filter: grayscale(1) contrast(4); }
.ls-bar b { font-weight: 400; }
.ls-bar span { opacity: 1; }
.ls-bar-clock { margin-left: auto; font-variant-numeric: tabular-nums; }

.ls-stage { position: fixed; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; }

.ls-dock { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 2; display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 16px; transform: translateX(-50%); white-space: nowrap; }
.ls-dock p { margin: 0; font-size: 15px; }
.ls-dock small { display: block; margin-top: 2px; font-family: var(--lucid-font-mono); font-size: 11.5px; color: var(--lucid-ink-3); }

@media (max-width: 560px) {
  .ls-bar { gap: 14px; font-size: 13px; }
  .ls-bar-extra { display: none; }
  .ls-dock { left: 12px; right: 12px; transform: none; justify-content: space-between; white-space: normal; }
}