@font-face{font-family:Orbitron;src:url('assets/orbitron.ttf') format('truetype');font-weight:400;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:oklch(22% .04 260);color:oklch(98% 0 0)}
body{font-family:Orbitron,sans-serif}
/* Selected 12ui hero composition, using the original glennr.nl photograph. */
.generated-screen{position:relative;min-height:100svh;background:linear-gradient(0deg,rgba(34,34,34,.8),rgba(34,34,34,.1)),url('assets/background.jpg') center/cover no-repeat}
#hero{min-height:100svh;display:grid;grid-template-rows:auto 1fr;place-items:center;gap:32px;padding:24px 16px 48px}
.brand{max-width:100%;pointer-events:none}
.brand img{display:block;width:468px;max-width:100%;height:auto;object-fit:contain}
.random{margin:0;font-weight:400;font-size:clamp(20px,3.45vw,60px);line-height:1.5;text-align:center;text-wrap:balance}
.characters{display:flex;justify-content:center;flex-wrap:wrap;gap:0}
.word{display:inline-flex;white-space:nowrap}
.letter{display:inline-block;width:1.05em;text-align:center}
@media(max-width:600px){.characters{flex-direction:column;align-items:center;gap:12px}.random{font-size:clamp(20px,5.4vw,32px)}.brand img{width:374.4px}}
@media(max-height:450px){.brand img{width:228.8px}#hero{gap:24px;padding:16px 16px 24px}.random{font-size:clamp(18px,3.3vw,32px)}}