/* One continuous reading direction, with distinct project groups. */
.project-library {
    --library-muted: #929aab;
    --library-rule: rgba(194, 206, 228, 0.14);
    --rail-x: 6px;
    --rail-indent: 30px;
    width: min(100%, 536px);
    margin: 3.4rem auto 6rem;
    text-align: left;
}
.library-section + .library-section { margin-top: 3rem; }
.library-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.library-heading h2 {
    margin: 0;
    font: 500 11px/1.5 'Inter', sans-serif;
    letter-spacing: 0.16em;
    color: #bec5d2;
}
.library-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--library-rule);
}
.library-count {
    order: 1;
    color: #7e879a;
    font: 10px/1.5 'Menlo', monospace;
}
.app-shelf, .website-index, .side-shelf {
    position: relative;
    padding-left: var(--rail-indent);
}
.app-shelf::before, .website-index::before, .side-shelf::before {
    content: '';
    position: absolute;
    left: var(--rail-x);
    top: 24px;
    bottom: 24px;
    width: 1px;
    background: linear-gradient(var(--library-rule) 85%, transparent);
}
.library-item {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    min-width: 0;
    min-height: 76px;
    padding: 13px 0 25px;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(221, 232, 249, 0.1);
}
.library-item::before {
    content: '';
    position: absolute;
    left: calc(var(--rail-x) - var(--rail-indent));
    top: 24px;
    width: 4px;
    height: 4px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #d5dce9;
    box-shadow: 0 0 0 3px #00030d;
}
.library-item:focus-visible {
    outline: 1px solid #c8d3e5;
    outline-offset: 6px;
    border-radius: 4px;
}
.library-item .timeline-icon {
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 8px;
    transition: transform 180ms ease;
}
.library-item .timeline-title {
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 5px;
    letter-spacing: -0.015em;
}
.library-item .timeline-desc {
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--library-muted);
    margin: 0;
}
.library-item .timeline-chip {
    display: block;
    border: 0;
    background: none;
    padding: 4px 0 0;
    margin: 0;
    font: 9px/1.5 'Menlo', monospace;
    color: #8a93a5;
}
.library-item .timeline-chip::before { content: none; }
@media (hover: hover) {
    .library-item:hover .timeline-icon { transform: translateY(-2px); }
    .library-item:hover .timeline-title { color: #fff; }
    .library-item:hover .timeline-desc { color: #bec6d5; }
    .library-item:hover::before { background: #fff; box-shadow: 0 0 0 3px #00030d, 0 0 9px #c7d6ef; }
}
@media (max-width: 640px) {
    .project-library { width: 100%; margin-top: 2.8rem; padding: 0 4px; --rail-indent: 24px; --rail-x: 3px; }
    .library-item { grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
    .library-item .timeline-icon { width: 26px; height: 26px; border-radius: 7px; }
    .library-item .timeline-chip { display: none; }
    .library-section + .library-section { margin-top: 38px; }
}
@media (prefers-reduced-motion: reduce) {
    .project-library .timeline-icon { transition: none; transform: none; }
}