/* a0028 — Bottom tabbar + timeline (colorful, non-black) */
:root{
  --ink:#0b1020;
  --muted:#3e4b66;
  --card:#ffffff;
  --line:rgba(255,255,255,.55);
  --pill:rgba(255,255,255,.22);
  --shadow:0 18px 50px rgba(11,16,32,.18);
  --radius:18px;
  --tabH:62px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(255,255,255,.55), rgba(255,255,255,0)),
    radial-gradient(700px 420px at 80% 0%, rgba(255,255,255,.35), rgba(255,255,255,0)),
    linear-gradient(135deg, #ff6aa2 0%, #7c3aed 45%, #06b6d4 100%);
}
a{color:inherit;text-decoration:none}
.container{max-width:980px;margin:0 auto;padding:0 18px}

.compact{padding:14px 0 10px}
.compact .row{display:flex;gap:12px;align-items:center}
#logo a{display:inline-block;padding:8px 12px;border-radius:999px;background:var(--pill);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.35);font-weight:800;letter-spacing:.2px}
.meta{flex:1;min-width:0;color:rgba(255,255,255,.92)}
.meta .title{font-weight:800}
.meta .tagline{color:rgba(255,255,255,.82);font-size:14px}
.head-slot{color:rgba(255,255,255,.8);font-size:13px;text-align:right;min-width:180px}

.timeline{padding:10px 0 calc(var(--tabH) + 20px)}
.timeline-surface{position:relative;max-width:980px;margin:0 auto}
.timeline-surface:before{
  content:"";
  position:absolute;
  left:18px;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.5);
}
.entry{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;margin:14px 0}
.dot{width:14px;height:14px;border-radius:999px;place-self:start center;margin-top:16px;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.22)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 16px 18px}
.card.mini{background:rgba(255,255,255,.92)}
.mini-title{font-weight:800;margin-bottom:8px;color:#111827}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 10px calc(env(safe-area-inset-bottom,0px) + 10px)}
.tabs{list-style:none;margin:0 auto;padding:8px;max-width:980px;display:flex;gap:8px;justify-content:space-between;background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.28);border-radius:18px;backdrop-filter:blur(14px)}
.tab{flex:1}
.tab a{display:block;text-align:center;padding:10px 10px;border-radius:14px;color:rgba(255,255,255,.92);font-weight:700}
.tab.active a{background:rgba(255,255,255,.92);color:#111827}

#footer{margin-top:10px}
#footer .container{max-width:980px;margin:0 auto;padding:18px;color:rgba(255,255,255,.92)}
#footer .social a{display:inline-flex;align-items:center;gap:8px;margin-right:8px;padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.16)}
#footer p{margin:10px 0 0;color:rgba(255,255,255,.85)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width: 820px){
  .head-slot{display:none}
}