html, body { margin: 0; min-height: 100%; color: rgb(226 232 240); font-family: system-ui, sans-serif; background: rgb(15 23 42); }
main { max-width: 36rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1 { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
p { margin: 0.25rem 0 1.5rem; font-size: 0.85rem; color: rgb(148 163 184); }
ol { margin: 0; padding: 0; list-style: none; font: 0.8rem/1.5 ui-monospace, Menlo, Consolas, monospace; }
li { position: relative; margin-left: 0.5rem; padding: 0 0 1rem 1.25rem; border-left: 2px solid rgb(245 158 11); opacity: 0; animation: hop 0.4s ease-out forwards; }
li::before { content: ""; position: absolute; left: -0.4rem; top: 0.3rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgb(245 158 11); }
li:last-child { border-left-color: transparent; }
li:nth-child(2) { animation-delay: 0.5s; }
li:nth-child(3) { animation-delay: 1s; }
li:nth-child(4) { animation-delay: 1.5s; }
li:nth-child(5) { animation-delay: 2s; }
b { display: block; color: rgb(251 191 36); font-weight: 600; }
span { color: rgb(148 163 184); }
table { margin: 1rem 0 0 0.5rem; border-collapse: collapse; font: 0.8rem/1.6 ui-monospace, Menlo, Consolas, monospace; }
td { padding: 0 1.5rem 0 0; color: rgb(148 163 184); }
td + td { color: rgb(226 232 240); text-align: right; }
footer { margin-top: 2rem; font-size: 0.8rem; color: rgb(148 163 184); }
footer a { color: inherit; }
@keyframes hop { from { opacity: 0; transform: translateX(-0.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { li { animation: none; opacity: 1; } }