body{ padding:clamp(40px,6vw,88px) 0 120px; }
.lib-head{ max-width:60ch; }
.lib-head h1{ font-size:clamp(40px,6vw,84px); font-weight:500; letter-spacing:-0.04em; line-height:.96; margin:22px 0 0; }
.lib-head .lead{ color:var(--fg-mut); font-size:clamp(17px,1.4vw,20px); margin:24px 0 0; max-width:48ch; }
.src{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--fg-dim); margin-top:16px; }
.src a{ color:var(--accent-h); }

.group{ margin-top:clamp(48px,6vw,84px); }
.group > .eyebrow{ margin-bottom:26px; }

.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tile{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); display:flex; flex-direction:column; }
.stage{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; padding:30px; }
.stage .holder{ width:100%; height:100%; }
.bg-ivory{ background:
    radial-gradient(120% 90% at 50% 12%, oklch(0.86 0.04 60), transparent 60%),
    var(--ivory); }
.bg-charcoal{ background:
    radial-gradient(120% 90% at 50% 12%, oklch(0.30 0.03 40), transparent 62%),
    #111114; }
.bg-mono{ background:var(--ivory); }
.tile .meta{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-top:1px solid var(--line); }
.tile .meta > div{ min-width:0; }
.tile .meta .name{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg); white-space:nowrap; }
.tile .meta .sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--fg-dim); margin-top:3px; white-space:nowrap; }
.replay{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mut);
  background:transparent; border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 13px; cursor:pointer; transition:.2s var(--ease); white-space:nowrap; }
.replay:hover{ color:var(--fg); border-color:var(--fg-mut); }

.glyphs{ display:flex; flex-wrap:wrap; gap:14px; }
.glyph{ width:120px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-2);
  display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px 12px 14px; }
.glyph svg{ width:42px; height:42px; color:var(--fg); }
.glyph .gl{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); }

.usage{ margin-top:clamp(40px,5vw,64px); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.usage .uh{ padding:16px 20px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mut); }
.usage pre{ margin:0; padding:22px 20px; overflow-x:auto; background:#0c0c0e;
  font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--ivory-3); }
.usage pre .c{ color:var(--fg-dim); }
.usage pre .k{ color:var(--accent-h); }

@media (max-width:900px){ .tiles{ grid-template-columns:1fr; max-width:440px; } }

.pmarks{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.pmark{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-2);
  display:flex; flex-direction:column; align-items:center; gap:16px; padding:30px 12px 16px; }
.pmark svg{ width:60px; height:60px; color:var(--accent); }
.pmark .gl{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); }
@media (prefers-reduced-motion: no-preference){
  .pm-spin{ animation:pm-spin 9s linear infinite; transform-origin:50% 50%; }
  .pm-spin-rev{ animation:pm-spin 12s linear infinite reverse; transform-origin:50% 50%; }
  .pm-breathe{ animation:pm-breathe 4.5s ease-in-out infinite; transform-origin:50% 50%; }
  .pm-pulse{ animation:pm-pulse 3.4s ease-in-out infinite; transform-origin:50% 50%; }
}
@keyframes pm-spin{ to{ transform:rotate(360deg); } }
@keyframes pm-breathe{ 0%,100%{ transform:scale(.9); } 50%{ transform:scale(1.06); } }
@keyframes pm-pulse{ 0%,100%{ transform:scale(.94); opacity:.85; } 50%{ transform:scale(1.04); opacity:1; } }
@media (max-width:900px){ .pmarks{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:520px){ .pmarks{ grid-template-columns:1fr 1fr; } }