:root { --void: #101011; --panel: #18181a; --line: #404044; --text: #e8e7e2; --muted: #91918f; --signal: #d8ff45; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; background: #09090a; color: var(--text); font-family: "DM Mono", monospace; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.archive { min-height: 100svh; padding: 36px 5vw; display: grid; place-items: center; position: relative; isolation: isolate; overflow: hidden; }.archive::before { content: ""; position: absolute; inset: -55%; z-index: -1; pointer-events: none; opacity: .55; background: linear-gradient(118deg, transparent 38%, rgba(85, 85, 94, .18) 50%, transparent 62%), linear-gradient(238deg, transparent 42%, rgba(49, 49, 55, .34) 53%, transparent 64%); background-size: 170% 170%, 200% 200%; animation: graphite-flow 22s ease-in-out infinite alternate; }
.archive-content { width: min(100%, 760px); }.signal-bars { height: 20px; display: flex; align-items: center; gap: 4px; margin-bottom: 18px; }.signal-bars i { display: block; width: 3px; height: 5px; background: var(--signal); animation: signal 1.25s ease-in-out infinite alternate; }.signal-bars i:nth-child(2) { animation-delay: -.32s; }.signal-bars i:nth-child(3) { animation-delay: -.7s; }.signal-bars i:nth-child(4) { animation-delay: -.18s; }.signal-bars i:nth-child(5) { animation-delay: -.52s; }
h1 { margin: 0 0 34px; font-family: "Unbounded", sans-serif; font-size: clamp(44px, 8.8vw, 130px); font-weight: 600; line-height: .95; letter-spacing: 0; }.archive h1 span { color: var(--signal); }
.link-list { border-top: 1px solid var(--line); }
.archive-link { position: relative; min-height: 84px; display: grid; grid-template-columns: 60px minmax(145px, .9fr) 1fr 36px; align-items: center; gap: 14px; padding: 16px 18px 16px 0; overflow: hidden; border-bottom: 1px solid var(--line); transition: color .24s ease, padding-left .24s ease; }.archive-link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal); transform: translateX(-101%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }.archive-link:hover, .archive-link:focus-visible { color: var(--void); padding-left: 18px; outline: none; }.archive-link:hover::before, .archive-link:focus-visible::before { transform: translateX(0); }.archive-link:active { transform: scale(.985); }
.link-icon { width: 20px; height: 20px; color: var(--muted); }.link-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }.archive-link:hover .link-icon, .archive-link:focus-visible .link-icon { color: var(--void); }.link-name { font-family: "Unbounded", sans-serif; font-size: clamp(16px, 2.1vw, 27px); font-weight: 500; }.link-detail { color: var(--muted); font-size: 11px; text-align: right; }.archive-link:hover .link-detail, .archive-link:focus-visible .link-detail { color: var(--void); }.link-arrow { justify-self: end; font-size: 25px; transition: transform .3s ease; }.archive-link:hover .link-arrow, .archive-link:focus-visible .link-arrow { transform: rotate(45deg); }
@keyframes signal { to { height: 20px; opacity: .42; } }
@keyframes graphite-flow { 0% { background-position: 0% 30%, 100% 80%; } 50% { background-position: 65% 60%, 35% 15%; } 100% { background-position: 100% 25%, 0% 50%; } }
@media (max-width: 620px) { .archive { min-height: 100svh; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); align-items: center; }.archive-content { padding: 4vh 0; }.signal-bars { margin-bottom: 14px; } h1 { font-size: clamp(40px, 12vw, 56px); margin-bottom: 38px; line-height: 1; }.link-list { display: grid; gap: 10px; border: 0; }.archive-link { min-height: 102px; grid-template-columns: 50px 1fr 30px; grid-template-rows: 1fr auto; gap: 0 12px; padding: 18px 16px; border: 1px solid #343437; background: rgba(24, 24, 27, .78); -webkit-tap-highlight-color: transparent; }.archive-link::before { background: var(--signal); }.archive-link:active { transform: scale(.97); }.link-icon { grid-row: 1 / span 2; align-self: center; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #48484c; border-radius: 50%; }.link-icon svg { width: 19px; height: 19px; }.link-name { align-self: end; font-size: 16px; }.link-detail { grid-column: 2; grid-row: 2; align-self: start; margin-top: 5px; font-size: 10px; text-align: left; }.link-arrow { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 22px; }.archive-link:hover, .archive-link:focus-visible { padding-left: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }