:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #071017; color: #e7fff7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
main { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, 40%) 1fr; }
.intro { padding: clamp(2rem, 6vw, 6rem); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 0 35%, #103c3a, transparent 48%); z-index: 1; }
.eyebrow { font-size: .75rem; letter-spacing: .14em; color: #73fbd3; }
h1 { font-size: clamp(2.6rem, 5vw, 5rem); line-height: .95; margin: .4rem 0 1rem; }
#status { min-height: 3em; color: #b7d5cf; }
.controls { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.3rem; }
input { accent-color: #73fbd3; }
button { border: 1px solid #73fbd3; border-radius: 99px; padding: .65rem 1rem; color: #071017; background: #73fbd3; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.hint { margin-top: 2rem; font-size: .8rem; line-height: 1.5; color: #7e9b96; }
#globe { min-height: 52vh; }
@media (max-width: 800px) { main { display: block; } .intro { min-height: 45vh; padding: 2.5rem 1.5rem; } #globe { height: 55vh; } }