:root { color-scheme: dark; --fg: #e9e0ff; --dim: #7a6a9a; --purple: #a855f7; --gold: #f5c542; --line: #24123d; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; color: var(--fg); font: 15px/1.5 "DaddyTimeMono", monospace; overflow-x: clip; }
body { isolation: isolate; min-height: 100vh; display: grid; place-items: center; }
#fog { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
main { width: 100%; max-width: 760px; padding: 3rem 1.25rem; }
.crew { display: flex; align-items: flex-end; gap: 1.6rem; color: var(--gold); text-shadow: 0 0 12px #f5c54266; }
h1 { margin: 0 0 1.8rem; font-size: clamp(2rem, 7vw, 3.4rem); font-weight: normal; letter-spacing: .05em; line-height: 1.1; }
h1 small { display: block; margin-top: .5rem; font-size: .95rem; color: var(--dim); letter-spacing: 0; text-shadow: none; }
.lh { position: relative; width: 120px; height: 160px; flex: none; filter: drop-shadow(0 0 12px #a855f788); }
.lh img { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
.beam { position: absolute; left: 50%; top: 22%; width: 620px; height: 120px; margin-top: -60px; mix-blend-mode: screen; transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, #fff3c4ee, #f5c54266 40%, #f5c54200); clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%); animation: sweep 7s ease-in-out infinite; filter: blur(2px); }
@keyframes sweep { 0%, 100% { transform: rotate(-25deg) scaleX(1); opacity: .9; } 25%, 75% { transform: rotate(0) scaleX(.2); opacity: .1; } 50% { transform: rotate(25deg) scaleX(.05); opacity: 0; } }
h1 b { font-weight: normal; font-size: 1.15em; } h1 b i { font-style: normal; color: #fff; text-shadow: 0 0 1px #000, 0 0 6px #ffffffaa, 0 0 14px #ffffff44; }
.by i:nth-child(odd) { color: #3cc4ff; text-shadow: 0 0 1px #000, 0 0 6px #3cc4ffcc, 0 0 16px #0098d488; }
.nbg i:nth-child(odd) { color: #ff3b47; text-shadow: 0 0 1px #000, 0 0 6px #ff3b47cc, 0 0 16px #e3061388; }
.wappen { height: 1.35em; vertical-align: -.35em; margin-right: .3em; filter: drop-shadow(0 0 3px #f5c54266); }
.prompt { margin: 0 0 1rem; color: var(--dim); } .prompt span { color: var(--purple); } .prompt b { color: var(--gold); font-weight: normal; }
.cursor { color: var(--gold); font-style: normal; animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; }
.tile { display: grid; gap: .2rem; padding: 1rem 1.1rem; background: #000c; border: 1px solid var(--line); color: var(--fg); text-decoration: none; transition: border-color .1s, box-shadow .1s; }
.tile:hover, .tile:focus-visible { outline: none; border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple), 0 0 18px -4px var(--purple); }
.tile .name { font-size: 1.2rem; } .tile .name::before { content: "./"; color: var(--dim); } .tile .sub { color: var(--dim); font-size: .85rem; }
@media (max-width: 560px) { .crew { gap: .9rem; } .lh { width: 64px; height: 86px; } .beam { width: 300px; height: 60px; margin-top: -30px; } h1 small { font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .beam, .cursor { animation: none; } #fog { display: none; } }