@charset "UTF-8";
:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { position: relative; margin: 0; min-height: 100vh; min-height: max(100svh, 240px); display: grid; place-items: center; background: #171916; color: #f0eee5; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
main { width: 100%; padding: 24px 16px; }
.back-link { position: absolute; top: 24px; left: 24px; padding: 12px; color: #adb1a3; text-decoration: none; font-size: 13px; }
.back-link:hover { color: #ddf1a0; }
.back-link:focus-visible { outline: 2px solid #ddf1a0; outline-offset: 4px; }
.motion-control { position: absolute; bottom: 24px; left: 24px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 12px; color: #adb1a3; font-size: 13px; cursor: pointer; }
.motion-control input { accent-color: #ddf1a0; }
.motion-control input:focus-visible { outline: 2px solid #ddf1a0; outline-offset: 4px; }
body:has(#pause-animation:checked) .letter span { animation-play-state: paused; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.text-container { display: flex; justify-content: center; gap: clamp(2px, 1.5vw, 24px); font-size: clamp(20px, 5vw, 96px); font-weight: 700; text-transform: uppercase; opacity: .8; }
.letter { display: grid; width: 1ch; height: 1.3em; line-height: 1.3; }
.letter:nth-child(8) { margin-left: .5em; }
.letter span { grid-area: 1 / 1; animation: fadeIn 4s cubic-bezier(.645, .045, .355, 1) infinite alternate; }
.letter span.new { animation-name: fadeOut; }
.letter span.static { animation: none; }
@keyframes fadeOut {
    0%, 40% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
    60%, 100% { opacity: 0; transform: translateY(-20px) rotateX(90deg); filter: blur(5px); }
}
@keyframes fadeIn {
    0%, 40% { opacity: 0; transform: translateY(20px) rotateX(-90deg); filter: blur(5px); }
    60%, 100% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
    .motion-control { display: none; }
    .letter span { animation: none; }
    .letter span.new { display: none; }
}