/* -------- Base (no external hrefs; all inline) -------- */
  :root{
    --bg: #0b1020;
    --panel: #121833;
    --ink: #e8ecf4;
    --ink-muted: #a7b0c0;
    --accent: #7aa2ff;
    --accent-2: #9cf0ff;
    --ring: rgba(122,162,255,.5);
    --shadow: 0 8px 30px rgba(0,0,0,.25);
    --radius: 16px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
    color: var(--ink);
    background: radial-gradient(1000px 600px at 80% -10%, rgba(122,162,255,.15), transparent 60%),
                radial-gradient(800px 500px at -10% 20%, rgba(156,240,255,.12), transparent 60%),
                var(--bg);
    line-height: 1.6;
  }
  .container{width:min(1100px, 92%); margin-inline:auto}
  .visually-hidden{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }

  /* Header */
  .site-header{
    position: sticky; top: 0; z-index: 10;
    background: rgba(10,16,32,.6);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .header-inner{display:flex; align-items:center; justify-content:space-between; padding: 16px 0}
  .site-title{font-size: clamp(20px, 3vw, 28px); margin:0; letter-spacing:.2px}
  .nav-buttons{ display:flex; gap: 10px; flex-wrap:wrap }
  .btn{
    background: transparent;
    color: var(--ink-muted);
    border: 1px solid rgba(255,255,255,.1);
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
  }
  .btn:hover{ color: var(--ink); background: rgba(255,255,255,.06) }

  /* Hero */
  .hero{ padding: 56px 0 32px }
  .hero h2{ font-size: clamp(24px, 4vw, 34px); margin: 0 0 8px }
  .lead{ color: var(--ink-muted); max-width: 70ch; margin: 0 }

  /* Sections */
  .section{ padding: 28px 0 8px }
  .section-header{ display:flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px }
  .section h2{ font-size: clamp(20px, 3.5vw, 28px); margin: 0 }
  .actions{ display:flex; align-items:center; gap: 8px }

  .search-input{
    width: min(360px, 60vw);
    background: var(--panel);
    color: var(--ink);
    border: 1px solid rgba(255,255,255,.08);
    padding: 10px 12px;
    border-radius: 12px;
    outline: none;
  }
  .search-input:focus{ box-shadow: 0 0 0 4px var(--ring); border-color: rgba(255,255,255,.15)}

  .grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
  }

  /* Cards */
  .card{
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
  }
  .card-title{ margin: 0 0 2px; font-size: 18px }
  .muted{ color: var(--ink-muted); margin: 0 }
  .small{ font-size: 12px }

  .meta{ list-style:none; padding: 10px 0 0; margin: 0 }
  .meta li + li{ margin-top: 6px }

  .copy-btn{
    margin-left: 8px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: var(--ink);
    cursor: pointer;
  }

  /* Reading lists */
  .list-block{
    background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .list-block summary{
    cursor: pointer;
    font-weight: 600;
    outline: none;
  }
  .list-block ol{ margin: 8px 0 0 1.2rem; }
  .tag{
    display:inline-block; font-size: .8em; padding: 2px 8px; margin-left: 6px;
    border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: var(--ink-muted);
  }

  /* Footer */
  .site-footer{ border-top: 1px solid rgba(255,255,255,.06); margin-top: 40px }
  .footer-inner{ padding: 18px 0 36px }