/* 503 page while PHP is off (terminal, one of three that Apache picks per request): a phosphor terminal. A separate file, so strict CSPs (style-src 'self') allow it. */
* { box-sizing: border-box; }
html { background: #050805; }
body {
    margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
    font: 16px/1.6 ui-monospace, "Cascadia Code", "DejaVu Sans Mono", Menlo, Consolas, monospace;
    color: #b9f5c4;
    background:
        radial-gradient(ellipse at 50% 40%, #0d2412 0%, #050805 70%);
}
main { width: 100%; max-width: 680px; }
.crt {
    position: relative; border-radius: 14px; overflow: hidden;
    background: #031006; border: 1px solid #1c4d26;
    box-shadow: 0 0 0 6px #0a160c, 0 0 60px #29ff5a26, inset 0 0 80px #000;
}
.crt::after { /* scanlines + flicker */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, #0000 0 2px, #00000059 2px 3px);
    animation: flicker 6s infinite steps(1);
}
.bar { display: flex; gap: 7px; align-items: center; padding: 10px 14px; background: #0b1f0f; border-bottom: 1px solid #1c4d26; }
.bar span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f56; }
.bar span:nth-child(2) { background: #ffbd2e; }
.bar span:nth-child(3) { background: #27c93f; }
.bar b { margin-left: 10px; font-weight: normal; font-size: 13px; color: #6fb07c; }
pre {
    margin: 0; padding: 18px 20px 22px; font: inherit; font-size: 14px; white-space: pre-wrap;
    text-shadow: 0 0 6px #4dff7a80;
}
.l { opacity: 0; animation: type .35s steps(1) forwards; }
.l:nth-child(1) { animation-delay: .3s; } .l:nth-child(2) { animation-delay: 1.1s; }
.l:nth-child(3) { animation-delay: 1.9s; } .l:nth-child(4) { animation-delay: 2.5s; }
.l:nth-child(5) { animation-delay: 2.8s; } .l:nth-child(6) { animation-delay: 3.1s; }
.l:nth-child(7) { animation-delay: 3.4s; } .l:nth-child(8) { animation-delay: 4.0s; }
pre i { font-style: normal; color: #4dff7a; }
pre em { font-style: normal; color: #ffcf4d; text-shadow: 0 0 6px #ffcf4d80; }
.err { color: #ff6b6b; text-shadow: 0 0 6px #ff6b6b80; }
u { text-decoration: none; animation: blink 1s steps(1) infinite; }
h1 { margin: 32px 0 8px; font-size: clamp(26px, 6vw, 40px); line-height: 1.2; color: #eafff0; text-shadow: 0 0 18px #4dff7a59; }
p { margin: 10px 0; color: #9ed6a9; }
a { color: #4dff7a; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: #eafff0; }
.foot { margin-top: 24px; font-size: 13px; color: #6fb07c; }
.lang { margin: 0 0 10px; text-align: right; font-size: 13px; }
.lang a::before { content: "$ lang "; color: #6fb07c; }
@keyframes type { to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .85; } 48% { opacity: 1; } 83% { opacity: .9; } }
@media (max-width: 480px) { pre { font-size: 12px; padding: 14px; } }
@media (prefers-reduced-motion: reduce) {
    .l { opacity: 1; animation: none; } u, .crt::after { animation: none; }
}