/* ========== Base ========== */
    :root{
      --bg: #0b0c10;
      --surface: rgba(255,255,255,.06);
      --surface-2: rgba(255,255,255,.09);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.66);
      --border: rgba(255,255,255,.12);
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --max: 980px;
      --pad: 22px;
      --link: rgba(255,255,255,.92);
      --focus: rgba(255,255,255,.22);
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    }
    [data-theme="light"]{
      --bg: #f6f6f7;
      --surface: rgba(0,0,0,.04);
      --surface-2: rgba(0,0,0,.07);
      --text: rgba(0,0,0,.88);
      --muted: rgba(0,0,0,.58);
      --border: rgba(0,0,0,.12);
      --shadow: 0 12px 28px rgba(0,0,0,.10);
      --link: rgba(0,0,0,.88);
      --focus: rgba(0,0,0,.18);
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      line-height: 1.55;
      letter-spacing: 0.2px;
    }
    a{ color: var(--link); text-decoration: none; }
    a:hover{ text-decoration: underline; }

    .wrap{
      max-width: var(--max);
      margin: 0 auto;
      padding: 28px 18px 60px;
    }

    /* ========== Top bar ========== */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(14px);
      background: linear-gradient(to bottom, rgba(0,0,0,.30), rgba(0,0,0,0));
      padding: 12px 0 14px;
    }
    [data-theme="light"] .topbar{
      background: linear-gradient(to bottom, rgba(246,246,247,.75), rgba(246,246,247,0));
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 18px;
    }

    .brand{
      display:flex;
      align-items:flex-start;
      gap:12px;
      min-width: 220px;
    }
    .logo{
      width: 34px; height: 34px;
      border-radius: 12px;
      background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), rgba(255,255,255,.06));
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    .logo::after{
      content:"";
      position:absolute;
      inset:-40%;
      background: conic-gradient(from 0deg, rgba(255,255,255,.0), rgba(255,255,255,.22), rgba(255,255,255,.0));
      transform: rotate(0deg);
      animation: spin 10s linear infinite;
      opacity: .55;
    }
    @keyframes spin{
      to{ transform: rotate(360deg); }
    }

    .brand h1{
      font-size: 14px;
      margin:0;
      font-weight: 700;
      letter-spacing: .6px;
      text-transform: uppercase;
    }
    .brand p{
      margin:2px 0 0;
      font-size: 12px;
      color: var(--muted);
    }

    .controls{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .input{
      display:flex;
      align-items:center;
      gap:10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 10px 12px;
      min-width: 260px;
      box-shadow: none;
      transition: .2s ease;
    }
    .input:focus-within{
      border-color: var(--focus);
      background: var(--surface-2);
    }
    .input svg{ opacity:.75; flex:0 0 auto; }
    .input input{
      border:0;
      outline:0;
      width: 100%;
      background: transparent;
      color: var(--text);
      font-size: 13px;
    }
    .btn{
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 999px;
      padding: 10px 12px;
      font-size: 13px;
      cursor:pointer;
      transition: .18s ease;
      display:flex;
      align-items:center;
      gap:8px;
      user-select:none;
    }
    .btn:hover{
      background: var(--surface-2);
    }
    .btn:active{
      transform: translateY(1px);
    }
    .kbd{
      font-family: var(--mono);
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 8px;
      border: 1px solid var(--border);
      color: var(--muted);
      background: rgba(0,0,0,.08);
    }
    [data-theme="light"] .kbd{ background: rgba(0,0,0,.03); }

    /* ========== Hero ========== */
    .hero{
      margin-top: 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 22px;
      background: linear-gradient(135deg, var(--surface), rgba(255,255,255,0));
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      width: 420px; height: 420px;
      right:-220px; top:-220px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
      opacity:.8;
    }
    [data-theme="light"] .hero::before{
      background: radial-gradient(circle, rgba(0,0,0,.10), rgba(0,0,0,0) 70%);
      opacity:.65;
    }
    .hero h2{
      margin:0 0 8px;
      font-size: 22px;
      letter-spacing: .2px;
    }
    .hero p{
      margin:0;
      color: var(--muted);
      max-width: 62ch;
    }
    .hero .meta{
      margin-top: 14px;
      display:flex;
      gap:10px;
      flex-wrap: wrap;
      align-items:center;
      color: var(--muted);
      font-size: 12px;
    }
    .pill{
      border: 1px solid var(--border);
      background: var(--surface);
      padding: 6px 10px;
      border-radius: 999px;
    }

    /* ========== Layout ========== */
    .grid{
      display:grid;
      grid-template-columns: 1.3fr .7fr;
      gap: 18px;
      margin-top: 18px;
      align-items: start;
    }
    @media (max-width: 900px){
      .grid{ grid-template-columns: 1fr; }
      .input{ min-width: 200px; flex:1; }
      .brand{ min-width: auto; }
    }

    /* ========== Post list ========== */
    .card{
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: var(--radius);
      padding: var(--pad);
      box-shadow: var(--shadow);
    }
    .sectionTitle{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 12px;
      margin-bottom: 12px;
    }
    .sectionTitle h3{
      margin:0;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .7px;
    }
    .sectionTitle .muted{
      color: var(--muted);
      font-size: 12px;
    }

    .posts{
      display:flex;
      flex-direction:column;
      gap: 12px;
    }
    .post{
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 14px;
      background: rgba(255,255,255,.03);
      transition: .18s ease;
      cursor:pointer;
    }
    [data-theme="light"] .post{ background: rgba(0,0,0,.02); }
    .post:hover{
      background: rgba(255,255,255,.06);
      transform: translateY(-1px);
    }
    [data-theme="light"] .post:hover{ background: rgba(0,0,0,.04); }

    .postHeader{
      display:flex;
      justify-content:space-between;
      gap: 10px;
      align-items:flex-start;
    }
    .postTitle{
      margin:0;
      font-size: 16px;
      line-height:1.3;
    }
    .postMeta{
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
      margin-top: 2px;
    }
    .postExcerpt{
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 13px;
      max-width: 75ch;
    }
    .tags{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    .tag{
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      color: var(--muted);
    }
    [data-theme="light"] .tag{ background: rgba(0,0,0,.02); }

    /* ========== Reader (modal) ========== */
    dialog{
      width: min(860px, calc(100% - 24px));
      border: 1px solid var(--border);
      border-radius: 22px;
      padding: 0;
      background: var(--bg);
      color: var(--text);
      box-shadow: 0 30px 90px rgba(0,0,0,.55);
      overflow: hidden;
    }
    dialog::backdrop{
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(6px);
    }
    .readerTop{
      position: sticky;
      top:0;
      background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
      padding: 14px 14px 12px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 10px;
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(10px);
    }
    [data-theme="light"] .readerTop{
      background: linear-gradient(to bottom, rgba(246,246,247,.85), rgba(246,246,247,0));
    }
    .readerTop .title{
      display:flex;
      flex-direction:column;
      gap:3px;
      min-width: 0;
    }
    .readerTop h4{
      margin:0;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 62vw;
    }
    .readerTop .meta{
      font-size: 12px;
      color: var(--muted);
      display:flex;
      gap:8px;
      flex-wrap: wrap;
    }

    .progress{
      height: 2px;
      background: rgba(255,255,255,.08);
      position: relative;
      overflow: hidden;
      border-radius: 999px;
      flex: 1;
      min-width: 90px;
      border: 1px solid rgba(255,255,255,.10);
    }
    [data-theme="light"] .progress{
      background: rgba(0,0,0,.06);
      border: 1px solid rgba(0,0,0,.10);
    }
    .progress > i{
      display:block;
      height: 100%;
      width: 0%;
      background: rgba(255,255,255,.72);
      transition: width .08s linear;
    }
    [data-theme="light"] .progress > i{ background: rgba(0,0,0,.72); }

    .readerBody{
      padding: 0 18px 20px;
    }
    .readerBody h2{
      margin: 18px 0 8px;
      font-size: 28px;
      letter-spacing: .2px;
      line-height: 1.15;
    }
    .readerBody p{
      color: var(--text);
      margin: 0 0 14px;
      font-size: 16px;
      max-width: 70ch;
    }
    .readerBody .quote{
      margin: 16px 0;
      padding: 14px 14px;
      border-left: 3px solid var(--border);
      background: var(--surface);
      border-radius: 14px;
      color: var(--muted);
      max-width: 70ch;
    }
    .readerBody .hr{
      height:1px;
      background: var(--border);
      margin: 18px 0;
    }

    /* ========== Sidebar ========== */
    .side .block{
      border: 1px solid var(--border);
      background: rgba(255,255,255,.03);
      border-radius: 16px;
      padding: 14px;
    }
    [data-theme="light"] .side .block{ background: rgba(0,0,0,.02); }
    .side .block + .block{ margin-top: 12px; }
    .side h4{
      margin:0 0 10px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: .7px;
    }
    .side p, .side li{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }
    .side ul{
      padding-left: 18px;
      margin: 8px 0 0;
    }
    .mini{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .mini .chip{
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 12px;
      color: var(--muted);
      background: var(--surface);
    }

    /* ========== Footer ========== */
    footer{
      margin-top: 22px;
      color: var(--muted);
      font-size: 12px;
      text-align:center;
      padding: 14px 0 0;
    }

    /* ========== Small niceties ========== */
    .hidden{ display:none !important; }
    .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;
    }