:root {
  color-scheme: dark;
  --bg: #07070a;
  --art-shade-rgb: 7, 7, 10;
  --panel: rgba(var(--surface-rgb), .96);
  --panel-raised: rgba(var(--surface-raised-rgb), .97);
  --panel-soft: rgba(var(--surface-deep-rgb), .76);
  --line: rgba(235, 235, 245, .09);
  --line-strong: rgba(var(--accent-rgb), .24);
  --text: #f2f2f5;
  --muted: #9a9aa8;
  --quiet: #72727f;
  --accent: #8977c8;
  --accent-rgb: 137, 119, 200;
  --accent-bright: #b3a7df;
  --accent-wash: rgba(137, 119, 200, .12);
  --accent-glow: rgba(137, 119, 200, .12);
  --surface-rgb: 19, 18, 25;
  --surface-raised-rgb: 25, 24, 32;
  --surface-deep-rgb: 11, 11, 16;
  --ambient-rgb: 91, 76, 132;
  --danger: #d9879a;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-panel: 0 18px 46px rgba(0, 0, 0, .34);
  --ease: cubic-bezier(.2, .7, .25, 1);
  --ui-gap: 14px;
  --menu-glimmer-duration: 24s;
  --menu-glimmer-opacity: .16;
  --title-glimmer-duration: 10s;
  --art-brightness: .23;
  --art-shade-top: .64;
  --art-shade-mid: .72;
  --art-shade-bottom: .78;
}

:root[data-menu-glow="clear"] { --menu-glimmer-duration: 17s; --menu-glimmer-opacity: .27; --title-glimmer-duration: 8s; }
:root[data-menu-glow="off"] { --menu-glimmer-opacity: 0; }
body[data-density="compact"] { --ui-gap: 9px; }
body[data-density="compact"] .setting-row, body[data-density="compact"] .setting-field { min-height: 56px; padding-block: 8px; }
body[data-density="compact"] .beat-item, body[data-density="compact"] .tekst-item { padding: 10px 12px; }
body[data-density="compact"] .p2p-box { padding: 11px 13px; }
body[data-density="compact"] .theme-choice { min-height: 56px; }

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}


body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: -12px;
  background: url("./src/assets/zdj.webp") center / cover no-repeat;
  filter: blur(20px) brightness(var(--art-brightness, .23)) saturate(.58) contrast(.88);
  transform: scale(1.08);
}
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(var(--accent-rgb), .075), transparent 58%),
    radial-gradient(ellipse at 78% 42%, rgba(var(--ambient-rgb), .055), transparent 52%),
    radial-gradient(ellipse at center, transparent 25%, rgba(3, 3, 6, .52) 100%),
    linear-gradient(180deg, rgba(var(--art-shade-rgb), var(--art-shade-top, .64)), rgba(var(--art-shade-rgb), var(--art-shade-mid, .72)) 55%, rgba(var(--art-shade-rgb), var(--art-shade-bottom, .78)));
}


.container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 42px 28px 90px;
  overflow: hidden;
}
.container h1 {
  max-width: 100%;
  margin: 0 0 clamp(24px, 3.5vh, 34px);
  color: #f2f2f5;
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: clamp(32px, 4.2vw, 50px);
  font-style: normal;
  font-weight: 720;
  line-height: 1.1;
  letter-spacing: -.045em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .48);
  user-select: none;
}
.home-entering #tytul { animation: homeTitleEnter .2s ease-out both; }
.home-entering #przyciski { animation: homeGridEnter .22s ease-out .025s both; }
@keyframes homeTitleEnter {
  from { opacity: .5; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}