:root {
    --archive-bg:#07080b;
    --archive-panel:#0d0e12;
    --archive-raised:#121319;
    --archive-line:rgba(255,255,255,.1);
    --archive-text:#f5f1e8;
    --archive-copy:#d0cec8;
    --archive-muted:#858894;
    --archive-faint:#555965;
    --archive-warm:#d9a85f;
    --archive-sky:#aeb9ee;
    color-scheme:dark;
}

* { box-sizing:border-box; }
html,body { width:100%;height:100%;margin:0; }
body { display:grid;place-items:start center;background:#030406;color:var(--archive-text);font-family:Inter,system-ui,sans-serif; }
a { color:inherit;text-decoration:none; }
a:focus-visible { outline:2px solid #e2bd82;outline-offset:3px; }

.archive-shell { width:min(100%,520px);min-height:100dvh;background:var(--archive-bg); }
.archive-topbar {
    position:sticky;top:0;z-index:10;min-height:54px;padding:0 12px;display:grid;grid-template-columns:36px 1fr 36px;
    align-items:center;border-bottom:1px solid var(--archive-line);background:rgba(7,8,11,.96);backdrop-filter:blur(12px);
}
.archive-topbar>a { width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:var(--archive-muted);font-size:16px; }
.archive-topbar>div { display:grid;justify-items:center;gap:2px; }
.archive-topbar small { color:var(--archive-faint);font:700 7.5px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase; }
.archive-topbar strong { font:700 13px/1 "Comic Neue","Comic Sans MS",cursive; }

.archive-scroll { padding:0 16px 30px; }
.archive-heading { padding:27px 2px 19px; }
.archive-heading span { color:var(--archive-muted);font:700 7.5px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase; }
.archive-heading h1 { margin:7px 0 0;font:700 25px/1 "Comic Neue","Comic Sans MS",cursive; }
.archive-list { display:grid;gap:14px; }
[hidden] { display:none!important; }

.archive-empty {
    min-height:210px;display:grid;place-content:center;justify-items:center;gap:7px;padding:28px;text-align:center;
    border-top:1px solid var(--archive-line);border-bottom:1px solid var(--archive-line);
}
.archive-empty strong { font:700 16px/1.1 "Comic Neue","Comic Sans MS",cursive; }
.archive-empty span { color:var(--archive-muted);font-size:9px; }

.archive-event {
    position:relative;display:block;overflow:hidden;border:1px solid var(--archive-line);border-radius:18px;
    background:var(--archive-panel);box-shadow:0 18px 38px rgba(0,0,0,.2);transition:transform .18s ease,border-color .18s ease;
}
.archive-event:hover { transform:translateY(-2px);border-color:rgba(255,255,255,.17); }
.archive-event-visual { position:relative;height:142px;display:block;overflow:hidden;background:#08090d; }
.archive-event-visual canvas { width:100%;height:100%;display:block;image-rendering:pixelated; }
.archive-lock {
    position:absolute;top:11px;left:11px;padding:6px 8px;border:1px solid rgba(255,255,255,.09);border-radius:999px;
    background:rgba(7,8,11,.76);color:rgba(255,255,255,.55);font:700 7px/1 Inter,sans-serif;font-style:normal;backdrop-filter:blur(7px);
}
.archive-event-copy { min-height:101px;padding:13px 14px 12px;display:grid;align-content:start; }
.archive-event-copy small { color:var(--archive-warm);font:700 7px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase; }
.archive-event-copy>strong { margin-top:6px;font:700 18px/1 "Comic Neue","Comic Sans MS",cursive; }
.archive-event-copy>span { margin-top:5px;color:var(--archive-muted);font-size:8.5px; }
.archive-event-copy b {
    margin-top:12px;padding-top:11px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--archive-line);
    color:var(--archive-copy);font:700 9.5px/1 Inter,sans-serif;
}
.archive-event-copy b i { color:var(--archive-muted);font-size:13px;font-style:normal; }

.archive-stars { border-color:rgba(174,185,238,.14); }
.archive-stars .archive-event-copy small { color:#aeb9ee; }
.archive-starfield {
    background:
        radial-gradient(circle at 70% 30%,rgba(92,101,153,.18),transparent 21%),
        radial-gradient(circle at 30% 75%,rgba(129,91,111,.1),transparent 25%),
        linear-gradient(155deg,#06070b,#0c0d16 60%,#06070a);
}
.archive-starfield::before,.archive-starfield::after {
    content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.58) 0 .8px,transparent 1px);
    background-position:7px 11px;background-size:37px 31px;opacity:.23;
}
.archive-starfield::after { background-position:18px 3px;background-size:53px 43px;opacity:.12; }
.archive-orbit { position:absolute;top:36px;left:50%;width:145px;height:67px;border:1px solid rgba(174,185,238,.16);border-radius:50%;transform:translateX(-50%) rotate(-12deg); }
.archive-star { position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.34); }
.archive-star.one { top:31px;left:23%; }
.archive-star.two { top:73px;left:46%;width:5px;height:5px; }
.archive-star.three { top:43px;right:20%; }
.archive-star.four { top:106px;left:32%; }
.archive-star.five { top:94px;right:29%; }
.archive-note-star { position:absolute;top:49%;left:71%;width:3px;height:3px;border-radius:50%;background:#f0d5c7;box-shadow:0 0 17px 8px rgba(217,168,160,.28);animation:archive-note-breathe 3.4s ease-in-out infinite; }
.archive-starfield>span {
    position:absolute;right:11px;bottom:10px;padding:5px 7px;border-radius:999px;background:rgba(7,8,11,.68);
    color:rgba(255,255,255,.45);font:700 7px/1 Inter,sans-serif;
}

@keyframes archive-note-breathe {
    0%,100% { opacity:.45;transform:scale(.82); }
    50% { opacity:1;transform:scale(1.12); }
}
@media (min-width:700px) {
    .archive-shell { min-height:calc(100dvh - 20px);margin:10px 0;border:1px solid var(--archive-line);border-radius:26px;overflow:hidden;box-shadow:0 35px 90px -30px rgba(0,0,0,.9); }
}
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation:none!important;transition:none!important; }
}