@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;800&display=swap";
:root{--bg-color:#000;--text-color:#fff;--navbar-bg:#0000004d;--accent:#3b82f6;--panel-bg:#0f0f14a6;--panel-border:#ffffff26;--input-border:#fff3;--btn-bg:#ffffff1a;--btn-hover:#ffffff40}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);flex-direction:column;min-height:100vh;font-family:Inter,sans-serif;display:flex;position:relative;overflow-x:hidden}body:before{content:"";opacity:.7;z-index:-1;pointer-events:none;background-image:url(/hero-bg.jpg);background-position:top;background-repeat:no-repeat;background-size:cover;position:fixed;inset:0}.navbar{background-color:var(--navbar-bg);-webkit-backdrop-filter:blur(10px);color:#fff;z-index:50;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;position:sticky;top:0;box-shadow:0 4px 20px #0000001a}.nav-left{letter-spacing:.5px;align-items:center;gap:10px;font-size:.9rem;font-weight:600;display:flex}.nasa-logo{letter-spacing:1px;background:#0b3d91;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-family:Outfit,sans-serif;font-size:10px;font-weight:800;display:flex}.nav-center h1{letter-spacing:.5px;font-family:Outfit,sans-serif;font-size:1.25rem;font-weight:600}.nav-right svg{opacity:.8;cursor:pointer;width:24px;height:24px;transition:opacity .2s}.nav-right svg:hover{opacity:1}.main-content{flex-direction:column;flex:1;justify-content:center;align-items:center;padding:2rem 2rem 120px;display:flex}.landsat-container{border-radius:4px;justify-content:center;max-width:100%;margin:0 auto;animation:.6s ease-out forwards fadeInScale;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.letter-block{aspect-ratio:1/2.5;cursor:pointer;background:#111;flex:1 1 0;width:18vw;min-width:0;max-width:220px;position:relative}.letter-block img{object-fit:cover;width:100%;height:100%;transition:transform .4s,filter .4s;display:block}.letter-block:hover img{filter:brightness(1.1);z-index:10;position:relative;transform:scale(1.05)}.letter-block+.letter-block{border-left:2px solid var(--bg-color)}.empty-state{text-align:center;color:var(--text-color);opacity:.5;font-size:1.25rem;animation:1s forwards fadeIn}.bottom-bar-wrapper{z-index:100;width:90%;max-width:700px;animation:.6s cubic-bezier(.16,1,.3,1) forwards slideUp;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)}.control-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--panel-border);border-radius:16px;gap:.5rem;padding:.5rem;display:flex;box-shadow:0 20px 40px #0000001a}.name-input{color:var(--text-color);border:2px solid var(--input-border);background:0 0;border-radius:12px;outline:none;flex:1;padding:1rem 1.5rem;font-family:Inter,sans-serif;font-size:1.25rem;transition:border-color .2s}.name-input:focus{border-color:var(--text-color)}.action-btn{background:var(--btn-bg);border:1px solid var(--input-border);color:var(--text-color);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;justify-content:center;align-items:center;font-family:Inter,sans-serif;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.action-btn:hover{background:var(--btn-hover)}.action-btn:active{transform:scale(.97)}.text-btn{padding:0 1.5rem}.icon-btn{flex-shrink:0;width:54px;height:54px}.icon-btn svg{width:20px;height:20px}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}.qr-modal{z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;justify-content:center;align-items:center;animation:.3s fadeIn;display:flex;position:fixed;inset:0}.qr-content{background:var(--panel-bg);border:1px solid var(--panel-border);text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--text-color);border-radius:20px;padding:2.5rem;box-shadow:0 20px 40px #0006}.qr-content h3{margin-bottom:1rem;font-family:Outfit,sans-serif}.qr-content img{background:#fff;border-radius:8px;margin:1.5rem 0;padding:10px;display:block}.close-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:12px;padding:.8rem 2.5rem;font-family:Inter,sans-serif;font-weight:600;transition:opacity .2s}.close-btn:hover{opacity:.9}@media (max-width:640px){.main-content{padding:1rem .5rem 120px}.navbar{padding:1rem}.nav-center h1{font-size:1rem}.nav-left{display:none}.letter-block{width:28vw}.control-panel{border-radius:20px;flex-wrap:wrap;padding:.75rem}.name-input{flex:none;width:100%;margin-bottom:.5rem}.text-btn{flex:1;height:54px}}