*{box-sizing:border-box}
:root{
 --accent:#ffd60a;
 --accent-text:#1c1c1e;
}
body{
 margin:0;
 background:#1c1c1e;
 color:#f2f2f7;
 font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
}
#window{
 height:100vh;
 display:flex;
 flex-direction:column;
 padding:10px;
}
#titlebar{
 height:36px;
 background:#2c2c2e;
 border-radius:12px 12px 0 0;
 display:flex;
 align-items:center;
 gap:12px;
 padding:0 12px;
}
.traffic{display:flex;gap:8px}
.dot{
 width:12px;height:12px;border-radius:50%;
 position:relative;
 cursor:pointer;
}
.dot::after{
 content:attr(data-icon);
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:10px;
 color:#000;
 opacity:0;
}
.dot:hover::after{opacity:1}
.red{background:#ff5f57}
.yellow{background:#febc2e}
.green{background:#28c840}
.title{
 flex:1;
 text-align:center;
 font-weight:500;
 color:#d1d1d6;
 pointer-events:none;
}
#app{
 flex:1;
 display:flex;
 gap:10px;
 padding-top:10px;
}
aside,main{
 background:#2c2c2e;
 border-radius:14px;
 overflow:hidden;
}
#tags{
 width:190px;
 padding:8px;
 display:flex;
 flex-direction:column;
 gap:8px;
}
#tags.collapsed{
 width:36px;
 padding:8px 4px;
}
#toggle-tags{
 background:none;
 border:none;
 color:#f2f2f7;
 cursor:pointer;
 align-self:flex-end;
}
#tags.collapsed #tag-list{display:none}
#posts{
 width:320px;
 display:flex;
 flex-direction:column;
}
.posts-header{
 padding:8px;
 display:flex;
 gap:6px;
 border-bottom:1px solid #3a3a3c;
}
#mobile-back{
 display:none;
 background:none;
 border:none;
 color:#f2f2f7;
 font-size:18px;
}
#search{
 flex:1;
 background:#1c1c1e;
 border:none;
 border-radius:8px;
 color:#f2f2f7;
 padding:6px 8px;
}
#post-list{overflow-y:auto}
#content{
 flex:1;
 display:flex;
 flex-direction:column;
}
.content-header{
 padding:8px;
 border-bottom:1px solid #3a3a3c;
 text-align:right;
}
.tag,.post,.group{
 padding:10px 12px;
 border-radius:10px;
 margin-bottom:4px;
 cursor:pointer;
}
.tag.active,.post.active{
 background:var(--accent);
 color:var(--accent-text);
}
.group{
 font-size:.75em;
 text-transform:uppercase;
 color:#a1a1a6;
 cursor:default;
}
.post{display:flex;gap:8px}
.post-preview{font-size:.9em;color:#a1a1a6}
.unread-dot{
 width:8px;height:8px;border-radius:50%;
 background:var(--accent);
 margin-top:6px
}
#post-content{
 padding:24px;
 animation:fade .18s ease
}
@keyframes fade{from{opacity:0}to{opacity:1}}
footer{
 padding:6px;
 text-align:center;
 font-size:12px;
 color:#8e8e93;
}
footer a{color:inherit;text-decoration:none}
@media (max-width: 768px){
 #tags{display:none}
 #posts{width:100%}
 #content{display:none}
 #mobile-back{display:block}
}