:root {
  color-scheme: dark;
  --paper: #11130f;
  --ink: #f1eee4;
  --muted: #a8ad9e;
  --line: rgba(231, 225, 204, .18);
  --writer: #e48191;
  --reader: #8ad7ab;
  font-family: "Nyarindo Sans", system-ui, sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f4f0e5;
  --ink: #20251d;
  --muted: #66705f;
  --line: rgba(32, 37, 29, .16);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--reader) 13%, transparent), transparent 34%),
    radial-gradient(circle at 90% 88%, color-mix(in srgb, var(--writer) 12%, transparent), transparent 32%),
    var(--paper);
}
.library-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}
.brand {
  color: inherit;
  text-decoration: none;
  font: 18px/1 "Nyarindo Serif", Georgia, serif;
  letter-spacing: -.02em;
}
main {
  flex: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  padding: clamp(28px, 5vh, 58px) 20px;
}
.library-content {
  width: min(1120px, 100%);
  margin: 0 auto;
  min-width: 0;
  text-align: center;
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--muted);
  font: 11px/1.3 ui-monospace, monospace;
  letter-spacing: .16em;
}
h1 {
  max-width: 980px;
  margin: 0 auto;
  font: 400 clamp(44px, 7.2vw, 94px)/.94 "Nyarindo Serif", Georgia, serif;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
h1 em { color: var(--reader); font-weight: 400; }
.intro {
  max-width: 660px;
  margin: 24px auto 38px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.library-apps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  min-width: 0;
}
.library-card {
  min-width: 0;
  min-height: clamp(220px, 30vh, 300px);
  display: flex;
  flex-direction: column;
  padding: 28px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 24px;
  color: inherit;
  text-decoration: none;
  background: color-mix(in srgb, var(--paper) 82%, white 18%);
  transition: transform .24s ease, border-color .24s ease;
}
.library-card:hover { transform: translateY(-5px); }
.writer-card:hover { border-color: var(--writer); }
.reader-card:hover { border-color: var(--reader); }
.library-card span {
  color: var(--muted);
  font: 10px/1 ui-monospace, monospace;
  letter-spacing: .12em;
}
.library-card strong {
  margin-top: auto;
  max-width: 100%;
  font: 400 clamp(29px, 3.4vw, 44px)/1.05 "Nyarindo Serif", Georgia, serif;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.library-card p { max-width: 380px; color: var(--muted); line-height: 1.6; }
.library-card b { font: 11px/1 ui-monospace, monospace; letter-spacing: .06em; }
.writer-card b { color: var(--writer); }
.reader-card b { color: var(--reader); }

@media (max-width: 720px) {
  .library-header { padding: 18px 20px; align-items: flex-start; }
  main { padding: 30px 18px 46px; place-items: start center; }
  h1 { margin: 0; font-size: clamp(42px, 13vw, 68px); }
  .intro { margin-left: 0; margin-right: 0; }
  .library-apps { grid-template-columns: 1fr; }
  .library-card { min-height: 250px; }
}