:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101319; color: #f3f5f7; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
.shell { width: min(92vw, 620px); padding: 3rem; border: 1px solid #303744; border-radius: 20px; background: #171c24; box-shadow: 0 20px 80px #0006; }
h1 { margin: .2rem 0 .5rem; font-size: clamp(2rem, 7vw, 4rem); letter-spacing: -.06em; }
.muted { color: #aeb8c7; }
form { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
input, button { border-radius: 10px; padding: .8rem 1rem; border: 1px solid #394454; background: #202733; color: inherit; }
button { cursor: pointer; background: #7be0b2; border-color: #7be0b2; color: #101319; font-weight: 700; }
output { display: block; margin-top: 1.25rem; overflow-wrap: anywhere; }
.preview-image { display: block; max-width: 100%; max-height: 60vh; margin-top: 1.5rem; object-fit: contain; border-radius: 12px; }