src/library.css

.library-shell { background:#171714; color:#f5f1e8; }
.library-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(28px,6vw,100px); align-items:start; min-height:440px; padding:34px 42px 48px; border-bottom:1px solid #57554d; background:radial-gradient(circle at 78% 18%,rgba(204,255,0,.28),transparent 22%),radial-gradient(circle at 10% 95%,rgba(255,91,61,.3),transparent 26%),#171714; }
.library-back { color:#f5f1e8; font:700 11px/1 "DM Mono",monospace; letter-spacing:.12em; text-decoration:none; white-space:nowrap; }
.library-back::before { content:"←"; margin-right:9px; color:var(--acid); }
.library-heading { align-self:end; max-width:920px; padding-top:70px; }
.library-heading > span { color:var(--acid); font:600 9px/1 "DM Mono",monospace; letter-spacing:.17em; }
.library-heading h1 { margin:24px 0 22px; color:#fffef9; font-size:clamp(54px,7vw,104px); line-height:.9; letter-spacing:-.075em; white-space:normal; }
.library-heading h1 em { color:#ff765e; }
.library-heading p { margin:0; color:#c7c3b9; font-size:clamp(13px,1.3vw,17px); line-height:1.75; }
.library-create { align-self:start; display:flex; gap:22px; align-items:center; padding:13px 15px; border:1px solid #77746a; color:#f5f1e8; font-size:11px; font-weight:750; text-decoration:none; white-space:nowrap; }
.library-create span { color:var(--acid); font-size:16px; }
.library-create:hover { border-color:var(--acid); background:var(--acid); color:#11110f; }
.library-create:hover span { color:#11110f; }
.library-ticker { display:flex; justify-content:space-between; gap:28px; padding:14px 22px; overflow:hidden; border-bottom:1px solid #57554d; background:var(--acid); color:#11110f; font:700 9px/1 "DM Mono",monospace; letter-spacing:.16em; white-space:nowrap; }
.library-grid { columns:3 340px; column-gap:1px; padding:1px 0 0; background:#57554d; }
.library-item { display:inline-block; width:100%; margin:0 0 1px; break-inside:avoid; background:#22221e; color:#f5f1e8; vertical-align:top; }
.library-image { position:relative; padding:12px; background:#22221e; }
.library-image img { display:block; width:100%; height:auto; object-fit:contain; background:#11110f; }
.library-image > span { position:absolute; top:20px; left:20px; display:grid; min-width:28px; height:24px; padding:0 7px; place-items:center; background:rgba(17,17,15,.82); color:#fff; font:600 8px/1 "DM Mono",monospace; backdrop-filter:blur(8px); }
.library-meta { display:flex; justify-content:space-between; gap:18px; align-items:flex-end; padding:4px 14px 17px; color:#f5f1e8; }
.library-meta > div:first-child { display:grid; gap:6px; }
.library-meta small { color:var(--acid); font:600 8px/1 "DM Mono",monospace; letter-spacing:.09em; }
.library-meta strong { max-width:330px; overflow:hidden; font-size:13px; font-weight:650; line-height:1.35; letter-spacing:-.015em; text-overflow:ellipsis; white-space:nowrap; }
.library-detail { display:flex; flex-wrap:wrap; gap:5px 10px; justify-content:flex-end; color:#8f8c82; font:500 8px/1.2 "DM Mono",monospace; text-align:right; }
.library-status { margin:0; padding:25px; border-bottom:1px solid #57554d; background:#22221e; color:#bdb9ae; font:600 10px/1 "DM Mono",monospace; text-align:center; }
.library-shell footer { border-color:#57554d; color:#8f8c82; }
.library-shell footer a { color:var(--acid); text-decoration:none; }
@media(max-width:820px){.library-head{grid-template-columns:1fr auto;min-height:430px;padding:27px 22px 38px}.library-heading{grid-column:1/-1;grid-row:2;padding-top:35px}.library-heading p br{display:none}.library-grid{columns:2 260px}.library-ticker span:nth-child(2),.library-ticker span:nth-child(3){display:none}}
@media(max-width:560px){.library-create{padding:10px;font-size:9px}.library-heading h1{font-size:51px}.library-grid{columns:1}.library-meta{align-items:flex-start}.library-detail{max-width:42%}.library-ticker{font-size:8px}}