.city-app{--bg-cream:#fff7b7;--card-dark:#2a2a2a;--sky-blue:#d3e1fc;--yellow-accent:#ffd86c;--banner-yellow:#ffd35a;--nav-orange:#f9b87e;--active-green:#d5efa1;--link-blue:#8fd1f5;--ink:#000}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,.city-app{margin:0;padding:0}.city-app{background:var(--bg-cream);justify-content:center;min-height:100vh;font-family:Fira Sans Extra Condensed,Arial Narrow,Arial,sans-serif;display:flex}.city-app .city-container{background:var(--bg-cream);width:100%;max-width:430px;min-height:100vh;padding-bottom:96px;position:relative;overflow-x:hidden}.top-nav{background:var(--bg-cream);z-index:20;justify-content:space-between;align-items:center;gap:8px;padding:14px 14px 10px;display:flex;position:sticky;top:0}.top-nav button{all:unset;cursor:pointer;border-radius:12px;flex:none;justify-content:center;align-items:center;width:52px;height:52px;display:flex}.top-nav button img{object-fit:contain;width:34px;height:34px;display:block}.top-nav button.active{background:var(--yellow-accent);border:3px solid #000;box-shadow:3px 3px #000}.view{display:none}.view.active{animation:.28s viewIn;display:block}@keyframes viewIn{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:translate(0)}}.banner-wrap{flex-direction:column;align-items:center;padding:6px 20px 22px;display:flex}.cover-img{filter:drop-shadow(0 4px #00000026);width:280px;max-width:88%;height:auto;display:block}.join-btn-stack{width:92%;margin-top:-6px;position:relative}.join-btn-shadow{background:#000;border-radius:6px;position:absolute;inset:0;transform:rotate(-3deg)translate(6px,6px)}.join-btn{background:var(--banner-yellow);text-align:center;letter-spacing:.5px;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border:3px solid #000;border-radius:6px;padding:14px 10px;font-family:Fugaz One,Impact,sans-serif;font-size:20px;font-weight:900;position:relative;transform:rotate(-3deg)}.join-btn:active{transform:rotate(-3deg)scale(.98)}.feed{flex-direction:column;gap:34px;padding:10px 16px 20px;display:flex}.post{background:var(--card-dark);border:3px solid #000;border-radius:16px;margin-top:34px;padding:22px 14px 12px;position:relative;box-shadow:7px 7px #000}.post-avatar{clip-path:polygon(50% 0%,58.39% 7.83%,69.13% 3.81%,73.89% 14.25%,85.36% 14.64%,85.75% 26.11%,96.19% 30.87%,92.17% 41.61%,100% 50%,92.17% 58.39%,96.19% 69.13%,85.75% 73.89%,85.36% 85.36%,73.89% 85.75%,69.13% 96.19%,58.39% 92.17%,50% 100%,41.61% 92.17%,30.87% 96.19%,26.11% 85.75%,14.64% 85.36%,14.25% 73.89%,3.81% 69.13%,7.83% 58.39%,0% 50%,7.83% 41.61%,3.81% 30.87%,14.25% 26.11%,14.64% 14.64%,26.11% 14.25%,30.87% 3.81%,41.61% 7.83%);z-index:5;background:#e8b48c;border:3px solid #000;justify-content:center;align-items:center;width:78px;height:78px;display:flex;position:absolute;top:-30px;left:-14px;overflow:hidden}.post-avatar svg{width:70%;height:70%}.post-head{align-items:center;gap:8px;min-height:26px;margin-left:56px;display:flex}.post-head .username{color:#fff;font-size:15px;font-weight:700}.post-head .spacer{flex:1}.link-up{all:unset;cursor:pointer;background:var(--link-blue);color:#000;border:2px solid #000;border-radius:8px;padding:4px 12px;font-size:12px;font-weight:800;box-shadow:2px 2px #000}.link-up:active{box-shadow:none;transform:translate(2px,2px)}.caption{color:#e6e6e6;letter-spacing:.5px;margin:8px 2px 12px;font-size:13px}.media{aspect-ratio:4/5;background:var(--sky-blue);color:#00000047;border:2px solid #000;border-radius:10px;justify-content:center;align-items:center;width:100%;font-size:13px;font-weight:600;display:flex;overflow:hidden}.action-bar{background:#1c1c1c;border:2px solid #000;border-radius:22px;justify-content:center;align-items:center;gap:12px;width:fit-content;max-width:100%;margin:10px auto 0;padding:7px 14px;display:flex;position:relative}.action-item{align-items:center;gap:4px;display:flex}.count{color:#cfcfcf;white-space:nowrap;font-size:11px;font-weight:700}.plain-action{all:unset;cursor:pointer;color:#fff;justify-content:center;align-items:center;width:22px;height:22px;display:flex}.plain-action svg{width:18px;height:18px}.reaction-btn{all:unset;cursor:pointer;justify-content:center;align-items:center;width:24px;height:24px;transition:transform .18s;display:flex}.reaction-btn.picked{transform:translateY(-3px)}.reaction-face{justify-content:center;align-items:center;width:22px;height:22px;display:flex}.reaction-face svg,.reaction-face img{object-fit:contain;width:100%;height:100%;display:block}@keyframes selectPop{0%{transform:scale(.3)}55%{transform:scale(1.3)}to{transform:scale(1)}}.reaction-face.pop{animation:.32s selectPop}.reaction-popup{opacity:0;pointer-events:none;z-index:40;background:#1c1c1c;border:2px solid #000;border-radius:20px;gap:3px;max-width:min(230px,84vw);padding:5px 6px;transition:opacity .16s,transform .16s;display:flex;position:absolute;bottom:calc(100% + 10px);left:10px;transform:translateY(6px)scale(.7);box-shadow:3px 3px #000}.reaction-popup.open{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.reaction-popup .r-item{cursor:pointer;flex:none;justify-content:center;align-items:center;width:23px;height:23px;transition:transform .12s;display:flex}.reaction-popup .r-item:hover,.reaction-popup .r-item:active{transform:scale(1.3)translateY(-3px)}.reaction-popup .r-pink{background:#ff9db3;border:2px solid #000;border-radius:7px;padding:3px}.reaction-popup .r-pink svg{width:12px;height:12px}.reaction-popup img{object-fit:contain;width:23px;height:23px}@keyframes popIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.reaction-popup.open .r-item{animation:.16s backwards popIn}.reaction-popup.open .r-item:first-child{animation-delay:0s}.reaction-popup.open .r-item:nth-child(2){animation-delay:20ms}.reaction-popup.open .r-item:nth-child(3){animation-delay:40ms}.reaction-popup.open .r-item:nth-child(4){animation-delay:60ms}.reaction-popup.open .r-item:nth-child(5){animation-delay:80ms}.reaction-popup.open .r-item:nth-child(6){animation-delay:.1s}.reaction-popup.open .r-item:nth-child(7){animation-delay:.12s}.reaction-popup.open .r-item:nth-child(8){animation-delay:.14s}.feed-end{text-align:center;color:#8a7f4f;padding:20px 0 6px;font-size:12px;font-weight:600}.hub-topbar{align-items:center;gap:10px;padding:2px 18px 6px;display:flex}.back-btn{all:unset;cursor:pointer;background:#fff;border:3px solid #000;border-radius:12px;flex:none;justify-content:center;align-items:center;width:40px;height:40px;display:flex;box-shadow:3px 3px #000}.back-btn:active{box-shadow:none;transform:translate(3px,3px)}.back-btn svg{width:20px;height:20px}.hub-title{color:#000;font-family:Fugaz One,Impact,sans-serif;font-size:18px}.scope-toggle{background:#000;border-radius:20px;align-items:center;width:168px;height:38px;margin:10px auto 18px 18px;padding:4px;display:flex;position:relative}.scope-slider{z-index:1;background:#fff;border-radius:16px;width:52px;height:30px;transition:transform .22s cubic-bezier(.34,1.4,.64,1);position:absolute;top:4px;left:4px}.scope-toggle button{all:unset;cursor:pointer;z-index:2;flex:1;justify-content:center;align-items:center;height:30px;display:flex;position:relative}.scope-toggle button img,.scope-toggle button svg{object-fit:contain;width:20px;height:20px}.hub-hint{text-align:center;color:#8a7f4f;padding:2px 0 14px;font-size:12px;font-weight:700}.hub-list{flex-direction:column;gap:26px;padding:4px 18px 10px;display:flex}.feature-row{padding-top:2px;position:relative}.feature-shadow{background:#000;border-radius:6px;position:absolute;inset:0;transform:translate(7px,7px)}.feature-card{background:var(--fc,#ccc);cursor:pointer;border:3px solid #000;border-radius:6px;align-items:center;gap:10px;min-height:76px;padding:8px 16px;transition:transform .12s;display:flex;position:relative;overflow:visible}.feature-card:active{transform:translate(3px,3px)}.feature-card.icon-right{flex-direction:row-reverse}.feature-icon{object-fit:contain;filter:drop-shadow(0 2px #00000040);flex:none;width:64px;height:64px}.icon-left .feature-icon{margin-left:-26px}.icon-right .feature-icon{margin-right:-26px}.feature-text{flex:1;min-width:0}.icon-left .feature-text{text-align:right}.icon-right .feature-text{text-align:left}.feature-title{color:#000;letter-spacing:.3px;font-family:Fugaz One,Impact,sans-serif;font-size:24px;line-height:1}.feature-title.on-dark{color:#fff}.feature-sub{color:#000;opacity:.85;margin-top:3px;font-family:Fira Sans Extra Condensed,Arial,sans-serif;font-size:12.5px;font-weight:700}.feature-sub.on-dark{color:#fff}.bottom-nav-wrap{z-index:30;width:calc(100% - 32px);max-width:398px;position:fixed;bottom:14px;left:50%;transform:translate(-50%)}.bottom-nav{background:var(--nav-orange);border:3px solid #000;border-radius:26px;justify-content:space-between;align-items:center;padding:8px;display:flex;box-shadow:5px 5px #000}.bottom-nav button{all:unset;cursor:pointer;background:#f6cf9e;border:2.5px solid #000;border-radius:16px;flex:1;justify-content:center;align-items:center;height:46px;margin:0 3px;display:flex}.bottom-nav button svg{width:24px;height:24px}.bottom-nav button.active{background:var(--active-green);border-color:#000;box-shadow:2px 2px #000}