.rail{overflow-y:auto;scrollbar-width:none;width:84px;flex:none;border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;padding:22px 0;gap:6px;z-index:5}
.logo{display:block;width:44px;height:44px;border-radius:13px;overflow:hidden;transition:transform .35s var(--ease)}
.logo:hover{transform:rotate(-6deg) scale(1.05)}
.logo img{display:block;width:100%;height:100%}
.rail .end{margin-top:auto;display:grid;gap:12px;justify-items:center}
.rail nav{display:flex;flex-direction:column;gap:6px;margin-top:40px}
.tab{width:64px;padding:12px 0 9px;border-radius:14px;display:grid;gap:5px;justify-items:center;color:var(--mute);font-size:11px;transition:color .25s,background .25s}
.tab i{font-size:22px;transition:transform .4s var(--ease)}
.tab:hover{color:var(--txt)}
.tab:hover i{transform:translateY(-3px) rotate(-8deg)}
.tab.on{color:var(--on-accent);background:var(--accent)}
.rail .add{margin-top:0;width:46px;height:46px;border-radius:50%;border:1px dashed #333;font-size:20px;color:var(--mute);transition:all .3s}
.rail .add:hover{border-color:var(--accent-hi);color:#fff;transform:rotate(90deg)}
main{flex:1;position:relative;min-width:0;min-height:0;z-index:1}
.view{position:absolute;inset:0;overflow:auto;overflow-x:hidden;overscroll-behavior:contain;display:none;padding:34px clamp(20px,4vw,56px)}
.view.on{display:block;animation:wipe .7s var(--ease)}
@keyframes wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
.me{width:46px;height:46px;border-radius:50%;background:#1a1a1a center/cover;border:1px solid #2a2a2a;display:grid;place-items:center;font-size:20px;color:var(--mute);transition:border-color .3s}
.me.in{border-color:var(--accent)}
.me:hover{border-color:var(--accent-hi);color:#fff}