:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#020815;color:#f3f9ff}*{box-sizing:border-box}body{margin:0}.app{height:100dvh;max-width:620px;margin:auto;display:flex;flex-direction:column;background:linear-gradient(160deg,#081a36,#040e22 70%,#092b4b)}header{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:#06132c;border-bottom:1px solid #2b7eb1;box-shadow:0 0 18px #0677c044;z-index:2}.brand{display:flex;align-items:center;gap:10px}.logo{width:48px;height:48px;display:grid;place-items:center;border:2px solid #80d9ff;border-radius:14px;background:radial-gradient(circle at 50% 10%,#ffe59a,#137ba7 40%,#04132c 75%);font-size:31px;color:#c9ffff}.brand strong{display:block;font-size:clamp(18px,5vw,25px);letter-spacing:.6px;text-shadow:0 0 9px #4bcbff}.brand small{display:block;color:#ffca88;font-size:9px;font-weight:800}.tools{display:flex;gap:8px}button{font:inherit;cursor:pointer}.tools button{color:#c9f7ff;background:#0b2d55;border:1px solid #428ab7;border-radius:12px;font-size:24px;width:42px;height:42px}main{position:relative;flex:1;min-height:0;overflow-y:auto;background:radial-gradient(ellipse at 70% 22%,#ffbb66a6 0%,transparent 18%),radial-gradient(ellipse at 45% 42%,#0873bb9c 0%,transparent 48%),linear-gradient(153deg,#06132d 7%,#0a2b53 35%,#09284c 52%,#061326 65%,#102b48 83%,#040e23);isolation:isolate}main:before{content:'✦  ·  ✧   ·   ✦      ✧    ·    ✦  ·  ✧';position:absolute;top:12%;left:4%;right:4%;color:#b0e6ff;font-size:19px;letter-spacing:12px;opacity:.45;pointer-events:none}main:after{content:'';position:absolute;inset:28% 0 0;background:linear-gradient(145deg,transparent 28%,#134e82 29%,#071d3d 45%,transparent 46%),linear-gradient(35deg,transparent 35%,#286ca0 36%,#0b2850 52%,transparent 53%),linear-gradient(160deg,transparent 52%,#1c4e7b 53%,#04172f 66%,transparent 67%);opacity:.62;pointer-events:none}.content{position:relative;z-index:1;padding:16px;min-height:100%;display:flex;flex-direction:column}.hero{border:1px solid #54c7ff;border-radius:24px;padding:30px 18px;background:linear-gradient(125deg,#05122be6,#153e65b0);box-shadow:0 0 15px #3aaaff77;margin-bottom:20px}.hero h1{font-size:35px;line-height:1.05;margin:12px 0}.hero h1 em{color:#36d5ff;font-style:normal}.hero p{max-width:300px}.pill{border:1px solid #8cfaff;background:linear-gradient(110deg,#d3fbff,#0ed0ed);color:#07314a;border-radius:50px;padding:12px 22px;font-weight:800}.section-title{margin:15px 0 10px;font-size:21px}.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{min-height:120px;text-align:left;color:white;border:1px solid #64c8ff;border-radius:15px;padding:14px;background:linear-gradient(145deg,#0a3569d9,#05152be8);box-shadow:0 0 9px #118dd766}.tile .emoji{display:block;font-size:34px}.tile strong{display:block;font-size:17px;margin-top:7px}.tile small{color:#a8d9ef}.chat-head{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#061a38dd;border:1px solid #3db8ed;border-radius:17px;box-shadow:0 0 10px #2d9ce888}.chat-head .avatar{font-size:26px;background:#0d5288;border-radius:50%;padding:8px}.chat-head strong{font-size:19px}.status{display:block;color:#8ff2d5;font-size:12px}.clear{margin-left:auto;border:1px solid #5a94b8;border-radius:16px;background:#173b60;color:white;padding:8px;font-size:12px}.chat{flex:1;overflow-y:auto;min-height:170px;display:flex;flex-direction:column;gap:12px;padding:20px 0}.bubble{max-width:88%;padding:12px 14px;border-radius:17px;background:#0a2347e8;border:1px solid #3888bc;box-shadow:0 3px 12px #0006;white-space:pre-wrap;overflow-wrap:anywhere}.bubble.user{align-self:flex-end;background:#096a9c;border-color:#68d8ff}.bubble.assistant{align-self:flex-start}.bubble.notice{font-size:13px;color:#f8dca5}.composer{display:flex;gap:10px;border:2px solid #49c9fa;background:#072447e9;padding:9px;border-radius:28px;box-shadow:0 0 18px #09bfff66;margin-bottom:6px}.composer input{min-width:0;flex:1;border:2px solid #5be8ff;border-radius:28px;background:#082548;color:white;padding:13px;font-size:16px;outline:none}.composer button{border:0;border-radius:50%;width:51px;height:51px;background:linear-gradient(135deg,#d5fbff,#11c9ef);color:#052d4a;font-size:27px}.composer button:disabled{opacity:.55}nav{display:grid;grid-template-columns:repeat(5,1fr);background:#061b3d;border-top:2px solid #3dbef7;padding:8px 4px max(10px,env(safe-area-inset-bottom))}nav button{background:none;border:0;color:#b6e7f9;font-size:25px;padding:5px 0}nav button span{display:block;font-size:11px;font-weight:700}nav button.active{color:#53e7ff;text-shadow:0 0 8px #0bd3ff}.info{background:#061c3cdd;border:1px solid #4eabd7;border-radius:16px;padding:18px;line-height:1.5}a{color:#9aeaff}

/* Restored original Atlas mountain artwork from archived Atlas Social HTML */
main{background:linear-gradient(180deg,#03152b33,#00112d22),url("atlas-mountain.png") center center / cover no-repeat fixed!important}
main:before,main:after{display:none!important}
.hero{min-height:260px;background:linear-gradient(100deg,#04142bd9 0%,#04142b9c 48%,#04142b24 100%),url("atlas-mountain.png") center / cover no-repeat!important;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.hero small{color:#ffcf8c;font-weight:800}.hero h1{font-weight:900;text-shadow:0 2px 10px #000b}.hero p{font-size:13px;text-shadow:0 2px 5px #000}
.tile{position:relative;min-height:135px;overflow:hidden;background:linear-gradient(180deg,#05204122,#02112cf2),url("atlas-mountain.png") center / cover no-repeat!important;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;align-items:center;padding:8px}
.tile .emoji{font-size:24px;text-shadow:0 0 8px #4fdfff}.tile strong{font-size:15px;margin:3px 0}.tile small{font-size:10px;color:#fff;text-shadow:0 1px 3px #000}
#featured{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}#featured .tile{min-height:142px;padding:4px}#featured .tile strong{font-size:11px}#featured .tile small{font-size:9px}
#all{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}#all .tile{min-height:118px;padding:4px}#all .tile strong{font-size:11px}#all .tile small{font-size:9px}
.chat-head{background:#051735e9}.content:has(.chat){height:100%;min-height:100%}.chat{min-height:0}.composer{flex-shrink:0}
@media(min-width:500px){#featured,#all{grid-template-columns:repeat(4,minmax(0,1fr))}}