:root { --t9-bg: #0b0b0d; --t9-card: #121216; --t9-ink: #eaeaf2; --t9-muted: rgba(234,234,242,0.72); --t9-line: rgba(234,234,242,0.12); }
body { background: var(--t9-bg); color: var(--t9-ink); }
.t9 { min-height: 100vh; padding-bottom: 72px; }
.t9-head { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--t9-line); background: rgba(11,11,13,0.82); backdrop-filter: blur(10px); }
.t9-head__inner { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; }
.t9-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.t9-pip { width: 10px; height: 10px; border-radius: 999px; background: conic-gradient(from 90deg, #22c55e, #a78bfa, #60a5fa, #22c55e); }
.t9-page { font-size: 12px; color: var(--t9-muted); }
.t9-main { padding: 14px; }

/* Masonry-like layout using CSS columns */
.t9-masonry { column-count: 2; column-gap: 14px; }
.t9-card { break-inside: avoid; background: var(--t9-card); border: 1px solid var(--t9-line); border-radius: 18px; padding: 16px; line-height: 1.75; }
.t9-card img { max-width: 100%; height: auto; border-radius: 14px; }

.t9-foot { padding: 10px 14px 18px; color: var(--t9-muted); }

.t9-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; border-top: 1px solid var(--t9-line); background: rgba(18,18,22,0.82); backdrop-filter: blur(12px); }
.t9-tabs { margin: 0; padding: 10px 10px; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.t9-tab__a { display: block; text-align: center; padding: 10px 8px; border-radius: 14px; color: var(--t9-muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t9-tab.is-active .t9-tab__a { color: var(--t9-ink); background: rgba(96,165,250,0.14); }

@media (max-width: 680px) {
  .t9-masonry { column-count: 1; }
}