:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  color: #fff;
  background: #0f172a;
  -webkit-text-size-adjust: 100%;
  --page-space: clamp(12px, 3vmin, 36px);
  --panel-space: clamp(20px, 3.5vmin, 32px);
  --tile-space: clamp(18px, 2.8vmin, 24px);
  --tile-gap: clamp(10px, 1.6vmin, 16px);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: var(--page-space);
  padding-top: max(var(--page-space), env(safe-area-inset-top, 0px));
  padding-right: max(var(--page-space), env(safe-area-inset-right, 0px));
  padding-bottom: max(var(--page-space), env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--page-space), env(safe-area-inset-left, 0px));
  display: flex;
  background: radial-gradient(ellipse at 20% 15%, #182846 0%, transparent 62%),
              radial-gradient(ellipse at 90% 85%, #102c32 0%, transparent 60%), #0f172a;
}
.panel {
  width: min(100%, 600px);
  min-width: 0;
  margin: auto;
  padding: var(--panel-space);
  border: 1px solid #334155;
  border-radius: clamp(24px, 3vmin, 32px);
  background: linear-gradient(145deg, #172131, #111827 70%);
  box-shadow: 0 24px 72px #0005, 0 2px 8px #0002;
}
.header { margin-bottom: clamp(18px, 2.7vmin, 26px); }
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #cbd5e1;
  font-size: clamp(14px, 1.8vmin, 17px);
  font-weight: 600;
  letter-spacing: .18em;
}
.brand-icon { width: clamp(38px, 5vmin, 48px); height: auto; flex: none; }
h1 {
  margin: clamp(14px, 2vmin, 20px) 0 6px;
  font-size: clamp(25px, 3.8vmin, 32px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -.025em;
  overflow-wrap: break-word;
}
.header p { margin: 0; font-size: clamp(16px, 2vmin, 18px); line-height: 1.4; color: #cbd5e1; }
.books { display: grid; gap: var(--tile-gap); }
.book {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 108px;
  padding: var(--tile-space);
  border-radius: 20px;
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #ffffff1a;
  -webkit-tap-highlight-color: #ffffff26;
  transition: filter .15s ease, transform .15s ease;
}
.book-pp { background: linear-gradient(115deg, #2563eb, #1d4ed8); }
.book-pr { background: linear-gradient(115deg, #4f46e5, #4338ca); }
.book-math { background: linear-gradient(115deg, #0f766e, #115e59); }
.book-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: break-word; }
.subject { font-size: clamp(11px, 1.6vmin, 13px); line-height: 1.3; font-weight: 500; letter-spacing: .12em; }
.book-title { font-size: clamp(25px, 3.2vmin, 29px); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
.book-description { font-size: clamp(15px, 2vmin, 17px); line-height: 1.35; }
.arrow { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.book:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.book:active { filter: brightness(.94); transform: scale(.992); }
@media (hover: hover) and (pointer: fine) {
  .book:hover { filter: brightness(1.06); }
  .book:hover .arrow { transform: translateX(3px); }
}
/* Niski viewport (np. telefon poziomo): nadal trzy pionowe kafle.
   Przewijanie pozostaje dostępne, gdy tekst lub obszar roboczy tego wymaga. */
@media (max-height: 650px) {
  :root { --page-space: 12px; --panel-space: 20px; --tile-space: 14px 18px; --tile-gap: 10px; }
  .header { margin-bottom: 16px; }
  .brand-icon { width: 36px; }
  h1 { margin-top: 12px; }
  .book { min-height: 96px; }
}
@media (max-height: 450px) and (min-width: 600px) {
  :root { --panel-space: 16px 22px; --tile-space: 10px 16px; --tile-gap: 8px; }
  .header { margin-bottom: 12px; }
  .brand-icon { width: 28px; }
  .brand { font-size: 12px; }
  h1 { margin-top: 8px; font-size: 25px; }
  .header p { font-size: 15px; }
  .book { min-height: 82px; border-radius: 20px; }
  .book-title { font-size: 25px; }
  .book-description { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .book, .arrow { transition: none; }
  .book:active, .book:hover .arrow { transform: none; }
}