/* =====================================================================
   dusktype — app shell: top bar, mode bar, footer
   ===================================================================== */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 70rem;
  margin: 0 auto;
  padding: 1.625rem 2.5rem 1rem;
}
/* spacing as margins (not gap) so a collapsing footer animates its space away too */
.app > * + * { margin-top: 0.875rem; }

/* UI that fades out while typing so only the words remain */
.chrome { transition: opacity 150ms ease; }
body.typing .chrome { opacity: 0; pointer-events: none; }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo {
  display: flex; align-items: center; gap: 0.625rem;
  color: var(--text);
  font-size: 1.35rem; line-height: 1; letter-spacing: .02em;
  cursor: pointer; user-select: none;
}
.logo svg { width: 1.875rem; height: 1.875rem; flex: none; color: var(--main); }
.logo .wm b { font-weight: inherit; color: var(--main); }
.icons { display: flex; gap: 2px; }

/* ---------- mode bar ---------- */
.modebar { display: flex; justify-content: center; }
.mb-inner {
  display: flex; align-items: center; gap: 0.25rem;
  font-size: .78rem;
}
.mb-label { display: flex; align-items: center; gap: 0.375rem; color: var(--sub); padding: 0.3125rem 0.5rem; }
.mb-label svg { width: 0.8125rem; height: 0.8125rem; }
.mb-sep { width: 1px; height: 0.875rem; background: var(--sub-alt); margin: 0 0.375rem; }
.mb-btn { position: relative; padding: 0.3125rem 0.5rem; color: var(--sub); border-radius: 0.3125rem; transition: color var(--t); }
.mb-btn:hover { color: var(--text); }
.mb-btn.active { color: var(--text); }
.mb-btn::after {
  content: ""; position: absolute; left: 50%; bottom: -2px;
  width: 0.25rem; height: 0.25rem; margin-left: -2px; border-radius: 50%;
  background: var(--main);
  transform: scale(0); transition: transform var(--t);
}
.mb-btn.active::after { transform: scale(1); }

/* ---------- main stage ---------- */
main { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; min-height: 0; }

/* ---------- footer ---------- */
footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.375rem 1.125rem; font-size: .7rem; color: var(--sub); padding-top: 0.375rem; }
footer span { white-space: nowrap; }

@media (max-width: 760px) {
  .app { padding: 1rem 1rem 0.75rem; }
  .app > * + * { margin-top: 0.625rem; }
  .logo { font-size: 1.15rem; }
  .logo svg { width: 1.625rem; height: 1.625rem; }
  .mb-inner { font-size: .74rem; gap: 0; }
  .mb-sep { margin: 0 2px; }
  .mb-label, .mb-btn { padding: 0.3125rem 0.375rem; }
  footer .opt { display: none; }
}