:root {
    --bg:#111; --bg2:#1a1a1a; --bg3:#222; --border:#2a2a2a;
    --fg:#f0f0f5; --fg2:#888; --accent:#5fa3ff; --accent2:#a855f7;
    --ok:#4caf50; --warn:#ff9800;
  }
  * { box-sizing:border-box; margin:0; padding:0 }
  body {
    background:var(--bg); color:var(--fg);
    font:15px/1.6 system-ui,sans-serif;
    display:flex; flex-direction:column; align-items:center;
    min-height:100vh; padding:1.5rem 1rem;
  }
  .wrap { width:100%; max-width:480px }

  /* Header */
  .site-header {
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:1rem; margin-bottom:2rem;
    border-bottom:1px solid var(--border);
  }
  .site-header a { text-decoration:none }
  .brand { font-size:1.1rem; font-weight:700; color:var(--fg); letter-spacing:.04em }
  .brand span { color:var(--accent) }
  .header-tag { color:var(--fg2); font-size:.82rem }

  /* Page title */
  .page-title {
    font-size:2rem; font-weight:800; letter-spacing:.04em;
    background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; margin-bottom:.3rem;
  }
  .page-sub { color:var(--fg2); margin-bottom:2rem; font-size:.95rem }

  /* Alpha warning */
  .warn {
    background:#1a1200; border:1px solid #3a2800; border-radius:8px;
    padding:.85rem 1rem; margin-bottom:1.75rem;
    color:#ffcc55; font-size:.87rem; line-height:1.6;
  }
  .warn strong { display:block; margin-bottom:.2rem }

  /* Cards */
  .card {
    background:var(--bg2); border:1px solid var(--border); border-radius:10px;
    padding:1.6rem 1.75rem; margin-bottom:1.25rem;
  }
  .card-title {
    font-size:1rem; font-weight:700; color:var(--fg);
    margin-bottom:.4rem;
  }
  .card-desc {
    color:var(--fg2); font-size:.88rem; line-height:1.6;
    margin-bottom:1.1rem;
  }

  /* Buttons */
  .btn {
    display:block; width:100%; padding:.8rem 1rem;
    border:none; border-radius:6px;
    font-size:.95rem; font-weight:700; cursor:pointer;
    transition:opacity .15s; text-align:center; text-decoration:none;
  }
  .btn-primary { background:var(--accent); color:#000 }
  .btn-primary:hover { opacity:.85 }
  .btn-ghost {
    background:transparent; color:var(--fg2);
    border:1px solid var(--border);
  }
  .btn-ghost:hover { border-color:var(--fg2); color:var(--fg) }

  /* Join input row */
  .join-row { display:flex; gap:.5rem; margin-bottom:0 }
  .join-row input {
    flex:1; padding:.75rem .9rem;
    background:var(--bg3); border:1px solid var(--border);
    border-radius:6px; color:var(--fg);
    font-size:1rem; letter-spacing:.12em; text-transform:uppercase;
    text-align:center;
  }
  .join-row input::placeholder {
    letter-spacing:normal; text-transform:none; color:var(--fg2);
  }
  .join-row .btn { width:auto; white-space:nowrap; flex-shrink:0 }

  .card-note {
    color:var(--fg2); font-size:.8rem; margin-top:.85rem; line-height:1.6;
  }
  code {
    background:var(--bg3); padding:.1em .35em; border-radius:3px;
    font-family:monospace; font-size:.88em; color:var(--accent);
  }

  /* Live sessions */
  .live-section { margin-bottom:1.5rem }
  .section-label {
    font-size:.72rem; color:var(--accent); text-transform:uppercase;
    letter-spacing:.12em; font-weight:700; margin-bottom:.65rem;
  }
  .live-table {
    width:100%; border-collapse:collapse; font-size:.88rem;
  }
  .live-table thead th {
    text-align:left; padding:.35rem .3rem;
    color:var(--fg2); font-size:.75rem; font-weight:500;
    border-bottom:1px solid var(--border);
  }
  .live-table tbody tr { border-top:1px solid var(--border) }
  .live-table td { padding:.45rem .3rem; color:var(--fg2) }
  .live-table .td-code { font-family:monospace; color:var(--accent) }
  .live-table .td-join { text-align:right }
  .join-link {
    color:#000; background:var(--accent);
    text-decoration:none; font-size:.78rem; font-weight:700;
    padding:3px 9px; border-radius:4px;
  }

  /* FAQ */
  .faq-wrapper { margin-bottom:2rem }
  .faq-toggle {
    background:none; border:none; width:100%; text-align:left;
    padding:.6rem 0; cursor:pointer;
    display:flex; align-items:center; gap:.5rem;
    color:var(--fg2); font-size:.9rem;
  }
  .faq-toggle .faq-title { font-weight:700; color:var(--fg); font-size:.95rem }
  .faq-toggle .faq-hint { font-size:.8rem; margin-left:auto }
  .faq-body { display:none }
  .faq-body.open { display:block }
  .faq-section-label {
    font-size:.72rem; color:var(--accent); text-transform:uppercase;
    letter-spacing:.12em; font-weight:700; margin:1.25rem 0 .45rem;
  }
  details { border-bottom:1px solid var(--border); padding:.55rem 0 }
  details:first-of-type { border-top:1px solid var(--border) }
  summary {
    cursor:pointer; font-size:.93rem; color:var(--fg); list-style:none;
    display:flex; justify-content:space-between; align-items:center;
    user-select:none; padding:.15rem 0;
  }
  summary::-webkit-details-marker { display:none }
  summary::after { content:'+'; color:var(--fg2); font-size:1.05rem; flex-shrink:0; margin-left:1rem }
  details[open] summary::after { content:'\u2212' }
  details p {
    color:var(--fg2); font-size:.88rem; line-height:1.7;
    padding:.55rem 0 .15rem; margin:0;
  }
  details p a { color:var(--accent); text-decoration:none }

  /* Footer */
  .site-footer {
    text-align:center; margin-top:1.5rem;
    padding-top:1.1rem; border-top:1px solid var(--border);
    color:var(--fg2); font-size:.78rem; line-height:1.9;
  }
  .site-footer a { color:var(--accent); text-decoration:none }
  .site-footer a:hover { text-decoration:underline }