.cx{background:#fff;min-height:calc(100vh - 124px)}
.cx-grid{max-width:1265px;margin:0 auto;display:grid;grid-template-columns:260px minmax(0,600px) 350px;justify-content:center}
.cx-left{position:sticky;top:85px;height:calc(100vh - 85px);padding:14px 12px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line)}
.cx-left a.navi{display:flex;align-items:center;gap:18px;padding:12px 16px;border-radius:999px;text-decoration:none;color:var(--ink);font-size:1.22rem;width:fit-content;position:relative}
.cx-left a.navi:hover{background:var(--mist)}.cx-left a.navi.on{font-weight:700}
.cx-left a.navi .ico{width:27px;height:27px}.cx-left a.navi.on .ico{stroke-width:2.6}
.cx-left .badge{position:absolute;left:30px;top:6px;background:var(--leaf);color:#fff;font-size:.72rem;font-weight:700;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
.cx-left .post-btn{margin-top:14px;width:90%;justify-content:center;font-size:1.1rem;padding:16px}
.cx-left .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:999px;text-decoration:none;color:var(--ink)}
.cx-left .me:hover{background:var(--mist)}.cx-left .me b{display:block;font-size:.98rem;line-height:1.2}.cx-left .me span{color:var(--muted);font-size:.9rem}
.cx-main{border-right:1px solid var(--line);min-height:100vh;min-width:0}
.cx-head{position:sticky;top:85px;z-index:5;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.cx-head .ttl{padding:14px 18px;display:flex;align-items:center;gap:22px}
.cx-head .ttl h1{font:800 1.45rem/1.1 var(--body);color:var(--ink);margin:0}.cx-head .ttl small{display:block;color:var(--muted);font-size:.85rem}
.cx-head .back{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--ink)}.cx-head .back:hover{background:var(--mist)}
.tabs{display:flex}.tabs a{flex:1;text-align:center;padding:16px 8px;text-decoration:none;color:var(--muted);font-weight:600;position:relative}
.tabs a:hover{background:var(--mist)}.tabs a.on{color:var(--ink);font-weight:700}
.tabs a.on::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:56px;height:4px;border-radius:4px;background:var(--leaf)}
.av{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1rem;text-decoration:none;overflow:hidden}
.av.sm{width:36px;height:36px;font-size:.85rem}.av.lg{width:136px;height:136px;font-size:2.6rem;border:4px solid #fff}
.composer{display:flex;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.composer form{flex:1;min-width:0}
.composer textarea{border:0;padding:8px 0;font-size:1.25rem;resize:none;min-height:56px;outline:none!important;line-height:1.4}
.composer .row{display:flex;align-items:center;gap:4px;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.composer .tool{background:none;border:0;color:var(--green);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.composer .tool:hover{background:var(--mist)}.composer .tool .ico{width:22px;height:22px}
.composer .count{margin-left:auto;margin-right:12px;font-size:.85rem;color:var(--muted)}
.composer .preview{position:relative;margin:8px 0}.composer .preview img{border-radius:16px;max-height:340px;object-fit:cover;width:100%}
.composer .preview button{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;border:0;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:1.1rem}
.composer .walkx{display:none;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:8px;margin:8px 0}.composer .walkx.on{display:grid}
.composer .walkx input,.composer .walkx select{padding:9px 10px;font-size:.92rem}
.cx-cta{padding:22px 18px;border-bottom:1px solid var(--line);background:var(--sand)}
.cx-cta h2{font:800 1.5rem var(--body);color:var(--ink);margin:0 0 6px}.cx-cta p{margin:0 0 14px;color:var(--muted)}
.post{display:flex;gap:12px;padding:14px 18px 6px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.post:hover{background:#fafbfa}.post.focus{cursor:default}.post.focus:hover{background:#fff}
.post .main{flex:1;min-width:0}
.post .meta{display:flex;align-items:center;gap:5px;font-size:.98rem;flex-wrap:wrap;line-height:1.3}
.post .meta a{text-decoration:none;color:var(--ink)}.post .meta a.nm{font-weight:700}.post .meta a.nm:hover{text-decoration:underline}
.post .meta .h,.post .meta .t{color:var(--muted)}.post .meta .t:hover{text-decoration:underline}
.vbadge{width:17px;height:17px;color:var(--leaf)}
.post .text{font-size:1.02rem;line-height:1.45;margin:3px 0 8px;overflow-wrap:anywhere}
.post.focus .text{font-size:1.3rem;margin:12px 0}
.post .text a{text-decoration:none}.post .text a:hover{text-decoration:underline}
.post .title{font-weight:700;display:block}
.post .photo{border-radius:16px;overflow:hidden;border:1px solid var(--line);margin:8px 0;max-height:520px}
.post .photo img{width:100%;max-height:520px;object-fit:cover}
.post .walk{display:flex;gap:14px;flex-wrap:wrap;font-size:.88rem;color:var(--muted);margin:4px 0 6px}
.post .walk span{display:inline-flex;gap:4px;align-items:center}
.pill{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--mist);color:var(--green);letter-spacing:.02em}
.pill.demo{background:#fff4cc;color:#7a5b00}
.acts{display:flex;justify-content:space-between;max-width:440px;margin-left:-8px}
.acts button,.acts a{background:none;border:0;color:var(--muted);display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:.88rem;padding:6px 8px;border-radius:999px;cursor:pointer;text-decoration:none}
.acts .ico{width:19px;height:19px}
.acts .rp:hover{color:var(--blue);background:#e8f4fb}.acts .lk:hover,.acts .lk.on{color:#c22d57}.acts .lk:hover{background:#fbe8ee}
.acts .lk.on .ico{fill:currentColor}.acts .bm:hover,.acts .bm.on{color:var(--green)}.acts .bm:hover{background:var(--mist)}.acts .bm.on .ico{fill:currentColor}
.acts .sh:hover{color:var(--green);background:var(--mist)}
.post .more{margin-left:auto;position:relative}
.post .more>button{background:none;border:0;color:var(--muted);border-radius:50%;width:32px;height:32px;cursor:pointer;display:grid;place-items:center}
.post .more>button:hover{background:var(--mist);color:var(--green)}
.menu{display:none;position:absolute;right:0;top:32px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.15);border-radius:12px;z-index:20;min-width:200px;overflow:hidden}
.menu.on{display:block}.menu button,.menu a{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:0;padding:12px 16px;font:600 .95rem var(--body);cursor:pointer;color:var(--ink);text-decoration:none}
.menu button:hover,.menu a:hover{background:var(--mist)}.menu .danger{color:var(--red)}
.focus-stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:12px 0 4px;display:flex;gap:20px;font-size:.95rem;color:var(--muted)}
.focus-stats b{color:var(--ink)}
.reply-box{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.reply-box form{flex:1;display:flex;gap:10px;align-items:flex-end}
.reply-box textarea{border:0;font-size:1.1rem;resize:none;min-height:44px;padding:10px 0;outline:none!important}
.replying{font-size:.9rem;color:var(--muted);margin:2px 0 4px}.replying a{text-decoration:none}
.empty{padding:48px 32px;text-align:center;color:var(--muted)}.empty h2{font:800 1.8rem var(--body);color:var(--ink)}
.loadmore{display:block;text-align:center;padding:18px;text-decoration:none;font-weight:600;border-bottom:1px solid var(--line)}
.loadmore:hover{background:var(--mist)}
.prof-banner{aspect-ratio:3/1;background:linear-gradient(120deg,var(--forest),var(--green) 60%,var(--leaf)) center/cover}
.prof{padding:0 18px 12px;border-bottom:1px solid var(--line)}
.prof .top{display:flex;justify-content:space-between;align-items:flex-start;margin-top:-68px}
.prof .top .btn{margin-top:80px}
.prof h2{font:800 1.45rem/1.2 var(--body);color:var(--ink);margin:10px 0 0;display:flex;gap:6px;align-items:center}
.prof .handle{color:var(--muted);margin-bottom:10px}.prof .bio{margin:0 0 10px;font-size:1rem;line-height:1.45}
.prof .facts{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.94rem;margin-bottom:10px}
.prof .facts span{display:inline-flex;gap:5px;align-items:center}
.prof .counts{display:flex;gap:18px;font-size:.95rem}.prof .counts a{text-decoration:none;color:var(--muted)}.prof .counts a:hover{text-decoration:underline}.prof .counts b{color:var(--ink)}
.btn-follow{background:var(--ink);color:#fff}.btn-follow:hover{background:#000;color:#fff}
.btn-following{border-color:var(--line);color:var(--ink);background:#fff}.btn-following:hover{border-color:#f3c3c3;color:var(--red);background:#fdf0f0}
.cx-right{padding:12px 0 40px 28px;display:flex;flex-direction:column;gap:16px}
.cx-right .search{position:sticky;top:85px;background:#fff;padding:4px 0;z-index:3;margin:0}
.cx-right .search input{border-radius:999px;background:var(--mist);border-color:var(--mist);padding:12px 18px 12px 44px}
.cx-right .search .ico{position:absolute;left:16px;top:17px;color:var(--muted)}
.box{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.box h2{font:800 1.25rem var(--body);color:var(--ink);padding:14px 16px 6px;margin:0}
.box .it{display:flex;gap:12px;align-items:center;padding:11px 16px;text-decoration:none;color:var(--ink)}
.box .it:hover{background:var(--mist)}.box .it .who{flex:1;min-width:0;line-height:1.25}
.box .it .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.box .it .who span{color:var(--muted);font-size:.9rem}
.box .news{display:block;padding:11px 16px;text-decoration:none;color:var(--ink)}.box .news:hover{background:var(--mist)}
.box .news small{color:var(--muted);display:block;font-size:.8rem}.box .news b{font-size:.98rem;line-height:1.3;display:block}
.box .foot{display:block;padding:14px 16px;text-decoration:none;font-size:.95rem}.box .foot:hover{background:var(--mist)}
.mini-foot{font-size:.82rem;color:var(--muted);padding:0 8px;line-height:1.8}.mini-foot a{color:var(--muted);margin-right:10px}
.notif{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.notif:hover{background:#fafbfa}.notif.unread{background:#f3f9f2}
.notif .kind{width:30px;flex:none;display:flex;justify-content:flex-end}.notif .kind .ico{width:28px;height:28px}
.notif .kind.like{color:#c22d57}.notif .kind.like .ico{fill:currentColor}.notif .kind.follow{color:var(--blue)}.notif .kind.reply{color:var(--green)}
.notif p{margin:6px 0 0;font-size:.98rem}.notif .quote{color:var(--muted);margin-top:4px;font-size:.95rem}
.person{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);align-items:flex-start;text-decoration:none;color:var(--ink)}
.person:hover{background:#fafbfa}.person .who{flex:1;min-width:0}.person .who b{display:block}.person .who span{color:var(--muted);font-size:.92rem}
.person .who p{margin:4px 0 0;font-size:.96rem}
.cx-search{padding:10px 18px;border-bottom:1px solid var(--line)}.cx-search input{border-radius:999px;background:var(--mist);border-color:var(--mist)}
.modal{position:fixed;inset:0;background:rgba(10,25,18,.45);display:none;align-items:flex-start;justify-content:center;z-index:300;padding:5vh 16px;overflow:auto}
.modal.on{display:flex}.modal .dlg{background:#fff;border-radius:18px;width:100%;max-width:600px;padding:18px 20px 22px;position:relative}
.modal .dlg h2{font:800 1.3rem var(--body);color:var(--ink);margin:4px 0 16px 44px}
.modal .x{position:absolute;left:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:none;font-size:1.5rem;cursor:pointer}
.modal .x:hover{background:var(--mist)}
.auth{max-width:460px;margin:0 auto;padding:56px 24px 80px}
.auth h1{font-size:2.8rem}.auth .card{padding:28px;box-shadow:0 0 0 1px var(--line);border-radius:12px}
.auth .btn{width:100%;justify-content:center}.auth .alt{text-align:center;margin-top:18px;font-size:.98rem}
.code{font:700 1.5rem/1.3 ui-monospace,Menlo,monospace;background:var(--sand);padding:18px;border-radius:8px;text-align:center;letter-spacing:.06em;border:2px dashed var(--gold2)}
.mobile-tabs,.fab{display:none}
@media (max-width:1240px){.cx-grid{grid-template-columns:88px minmax(0,600px) 330px}.cx-left a.navi span,.cx-left .me .who{display:none}.cx-left .post-btn{width:56px;height:56px;padding:0}.cx-left .post-btn span{display:none}}
@media (max-width:1000px){.cx-grid{grid-template-columns:88px minmax(0,600px)}.cx-right{display:none}}
@media (max-width:640px){
 .cx-grid{grid-template-columns:1fr}.cx-left{display:none}.cx-main{border:0}
 .cx-head{top:70px}.composer .walkx{grid-template-columns:1fr 1fr}
 .mobile-tabs{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:60;justify-content:space-around;padding:6px 0 calc(6px + env(safe-area-inset-bottom))}
 .mobile-tabs a{padding:10px 14px;color:var(--ink);position:relative}.mobile-tabs .ico{width:26px;height:26px}
 .mobile-tabs .badge{position:absolute;right:6px;top:4px;background:var(--leaf);color:#fff;font-size:.7rem;border-radius:999px;padding:0 5px}
 .fab{display:grid;place-items:center;position:fixed;right:18px;bottom:80px;width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;z-index:61;box-shadow:0 6px 18px rgba(0,0,0,.25)}
 .fab .ico{width:26px;height:26px}.cx{padding-bottom:70px}
 .prof .top{margin-top:-44px}.av.lg{width:88px;height:88px;font-size:1.8rem}.prof .top .btn{margin-top:52px}
}

/* ===== Blend the X-style community into the Planetwalk site design ===== */
body.in-cx{background:var(--paper)}
.in-cx .site-header{position:sticky;top:0;z-index:60}
.cx{background:var(--paper);min-height:calc(100vh - 90px)}
.cx-left{top:90px;height:calc(100vh - 90px);border-right:1px solid var(--line)}
.cx-head{top:90px;background:rgba(247,246,240,.9)}
.cx-right .search{top:90px;background:var(--paper)}
.cx-main{background:#fff;border-left:1px solid var(--line)}
.in-cx h1,.in-cx h2,.in-cx h3{letter-spacing:normal}
.cx-head .ttl h1{font:400 1.75rem/1.1 var(--head);letter-spacing:-.4px}
.prof h2{font:400 2rem/1.15 var(--head);letter-spacing:-.4px}
.empty h2,.cx-cta h2{font:400 1.9rem/1.15 var(--head);letter-spacing:-.4px;margin:0 0 10px}
.cx-cta{background:#eef0e5}
.cx-left a.navi{border-radius:2px;font-size:1.06rem;font-weight:500}.cx-left a.navi.on{font-weight:700}
.cx-left a.navi:hover,.cx-left .me:hover{background:#eef0e5}
.cx-left .me{border-radius:2px}
.cx-left .post-btn{border-radius:2px;background:var(--ink)}
.cx-left .badge{background:#6d7c59}
.cx .tabs{padding:0;gap:0;border-bottom:1px solid var(--line);align-items:stretch}
.cx .tabs a{border-radius:0;padding:16px 8px;font-size:.98rem}.cx .tabs a.on{color:var(--ink);background:none}
.cx .tabs a.on::after{background:var(--ink);height:3px;border-radius:0}
.cx .tabs a:hover{background:#f6f6ef}
.post .meta{font-size:.95rem;color:var(--ink)}.post .meta span{margin-left:0}
.post:hover{background:#fbfbf7}.post.focus:hover{background:#fff}
.post .photo{border-radius:4px;border-color:var(--line)}
.composer .preview img{border-radius:4px}
.post.focus .text{font:400 1.45rem/1.4 var(--head)}
.acts .rp:hover{color:#3d6b8c;background:#eaf1f5}
.acts .lk:hover,.acts .lk.on{color:#a73f2a}.acts .lk:hover{background:#f6e6e1}
.acts .bm:hover,.acts .bm.on,.acts .sh:hover{color:var(--ink)}.acts .bm:hover,.acts .sh:hover{background:#eef0e5}
.vbadge{color:#606d4e}
.menu{border-radius:2px;border:1px solid var(--line)}
.cx-right .search input{border-radius:2px;background:#fff;border-color:var(--line)}
.cx .btn,.prof .btn{border-radius:2px}
.btn-follow{background:var(--ink)!important;color:#fff!important;border-radius:2px!important}
.btn-following{border-radius:2px!important}
.in-cx form label{margin:0;display:block;font-weight:500}
.in-cx form label.check{display:block}
.in-cx input,.in-cx textarea,.in-cx select{border-radius:2px}
.composer textarea,.reply-box textarea{border:0!important}
.prof-banner{background:linear-gradient(120deg,#233c2f,#3c5a44 60%,#6d7c59) center/cover}
.av.lg{border-color:#fff}
.mobile-tabs{background:var(--paper)}
@media (max-width:700px){.in-cx .site-header{height:76px}.cx-head,.cx-right .search{top:76px}.cx{min-height:calc(100vh - 76px)}}
@media (min-width:701px) and (max-width:1150px){.cx-left{top:88px;height:calc(100vh - 88px)}}
.box{border-radius:2px;background:#fff}
.box h2{font:400 1.5rem/1.15 var(--head);letter-spacing:-.3px}
.box .it:hover{background:#f6f6ef}