* { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0b0b1e;
    color: #e6e8ef;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }

  /* Nav (matches site style) */
  nav {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(15,15,35,0.95); backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.06); padding: 12px 0;
  }
  .nav-inner {
    max-width: 960px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .logo { font-weight: 800; font-size: 17px; color: #fff; text-decoration: none; }
  .logo span { color: #10B981; }
  .nav-links { display: flex; align-items: center; gap: 22px; }
  .nav-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; }
  .nav-links a:hover { color: #10B981; }
  .nav-links a.active { color: #fff; }

  /* Hero */
  .hero { max-width: 820px; margin: 0 auto; padding: 56px 20px 24px; text-align: center; }
  .hero h1 { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
  .hero p { margin-top: 12px; font-size: 17px; color: rgba(255,255,255,0.66); }

  /* Filters */
  .filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 26px auto 8px; max-width: 820px; padding: 0 20px; }
  .chip {
    border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.75); padding: 8px 16px; border-radius: 999px;
    font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .18s; user-select: none;
    appearance: none; -webkit-appearance: none;
  }
  .chip:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
  .chip.active { background: #fff; color: #0b0b1e; border-color: #fff; }
  .chip:focus-visible { outline: 3px solid #10B981; outline-offset: 3px; }

  /* Honesty note: the phone app isn't public yet */
  .app-note {
    display: flex; align-items: flex-start; gap: 10px;
    max-width: 820px; margin: 0 auto; padding: 12px 16px;
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.28);
    border-radius: 12px; font-size: 13.5px; color: rgba(255,255,255,0.82);
  }
  .app-note .icon { font-size: 16px; line-height: 1.4; flex-shrink: 0; }
  .app-note strong { color: #fbbf24; }

  /* Timeline */
  .feed { max-width: 820px; margin: 20px auto 80px; padding: 0 20px; }
  .card {
    position: relative; display: flex; gap: 18px;
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px; padding: 20px 22px; margin-bottom: 16px;
    transition: border-color .18s, transform .18s;
  }
  .card:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }
  .emoji { font-size: 30px; line-height: 1; flex-shrink: 0; width: 40px; text-align: center; }
  .body { flex: 1; min-width: 0; }
  .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
  .badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .2px; }
  .badge.app { background: rgba(16,185,129,0.14); color: #34d8a3; }
  .badge.website { background: rgba(59,130,246,0.14); color: #6ea8fe; }
  .badge.companion { background: rgba(168,85,247,0.15); color: #c58bfb; }
  .date { font-size: 13px; color: rgba(255,255,255,0.6); }
  .audience { font-size: 12px; color: rgba(255,255,255,0.6); margin-left: auto; }
  .card h2 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
  .card p { font-size: 15px; color: rgba(255,255,255,0.72); }
  .empty { text-align: center; color: rgba(255,255,255,0.5); padding: 50px 20px; }

  footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 26px 20px; text-align: center; color: rgba(255,255,255,0.6); font-size: 13px; }
  footer a { color: rgba(255,255,255,0.6); text-decoration: none; margin: 0 10px; }
  footer a:hover { color: #10B981; }

  @media (max-width: 560px) {
    .hero h1 { font-size: 30px; }
    .audience { display: none; }
    .card { padding: 16px; gap: 12px; }
    .emoji { font-size: 26px; width: 30px; }
    .nav-inner { padding: 0 16px; gap: 12px; }
    .logo { font-size: 16px; flex-shrink: 0; }
    .nav-links { gap: 14px; flex-wrap: nowrap; }
    .nav-links a { font-size: 13px; white-space: nowrap; }
  }