:root {
    /* --bg matches the shader's base color, so there is no flash before WebGL starts */
    --bg: #01030e; --panel: rgba(10, 13, 22, .72); --line: rgba(120, 140, 170, .18); --text: #e8edf2; --dim: #8592a3;
    --main: #ffcf3f; --live: #3fe0a0; --queued: #5aa9ff; --migrated: #c38bff; --failed: #ff5d6c; --sup: #3a4552;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 ui-sans-serif, system-ui, sans-serif; }
  #bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; display: block; pointer-events: none; }
  .kpi, .card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  header { background: rgba(1, 3, 14, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .mono { font-family: ui-monospace, 'SF Mono', Consolas, monospace; }
  header { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; padding: 20px 16px 8px; border-bottom: 1px solid var(--line); }
  header h1 { margin: 0; font-size: 22px; letter-spacing: .18em; }
  header .tag { color: var(--dim); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
  .pill { font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); }
  .pill.run { color: var(--live); border-color: var(--live); } .pill.pause { color: var(--failed); border-color: var(--failed); }
  header .right { margin-left: auto; color: var(--dim); font-size: 12px; }
  main { padding: 16px; display: grid; gap: 16px; }
  .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
  .kpi b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
  .kpi span { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; min-width: 0; }
  .card h2 { margin: 0 0 10px; font-size: 11px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; font-weight: 600; }
  .gens { display: flex; gap: 6px; overflow-x: auto; }
  .gen { flex: 0 0 auto; min-width: 84px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; text-align: center; }
  .gen b { display: block; font-size: 20px; } .gen small { color: var(--dim); display: block; }
  #treebox { overflow: auto; max-height: 70vh; }
  svg text { fill: var(--text); font: 11px ui-monospace, Consolas, monospace; }
  .edge { stroke: var(--line); fill: none; }
  .node { cursor: pointer; }
  .row { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
  @media (max-width: 900px) { .row { grid-template-columns: 1fr; } }
  #detail dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 8px; margin: 0; font-size: 12px; }
  #detail dt { color: var(--dim); } #detail dd { margin: 0; word-break: break-all; }
  a { color: var(--queued); }
  #events { max-height: 340px; overflow: auto; font-size: 12px; }
  #events div { padding: 4px 0; border-bottom: 1px solid var(--line); }
  #events .k { display: inline-block; min-width: 72px; color: var(--dim); }
  #events .k.split { color: var(--main); } #events .k.launch { color: var(--live); } #events .k.error { color: var(--failed); }
  .legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--dim); font-size: 12px; margin-bottom: 8px; }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
  .note { color: var(--dim); font-size: 12px; margin: 0; }
  /* launch panel */
  #launch[hidden] { display: none; }
  #launch .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #launch .full { grid-column: 1 / -1; }
  @media (max-width: 640px) { #launch .grid { grid-template-columns: 1fr; } }
  #launch label { display: grid; gap: 4px; font-size: 12px; color: var(--dim); }
  #launch input, #launch textarea { background: rgba(1, 3, 14, .7); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; font: inherit; width: 100%; }
  #launch textarea { min-height: 64px; resize: vertical; }
  #launch input:focus, #launch textarea:focus { outline: none; border-color: var(--main); }
  .imgpick { display: flex; gap: 10px; align-items: center; }
  .imgpick img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); background: var(--bg); }
  .btn { background: var(--main); color: #111; border: 0; border-radius: 6px; padding: 10px 16px; font-weight: 700; cursor: pointer; letter-spacing: .04em; }
  .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 500; }
  .btn:disabled { opacity: .45; cursor: not-allowed; }
  .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
  #lsteps { font-size: 12px; margin-top: 10px; display: grid; gap: 4px; }
  #lsteps .ok { color: var(--live); } #lsteps .err { color: var(--failed); } #lsteps .run { color: var(--queued); }
  #lresult { margin-top: 12px; border: 1px solid var(--live); border-radius: 8px; padding: 12px; font-size: 13px; }
  #lresult[hidden] { display: none; }

  /* ---- landing / explanation ---- */
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  [id] { scroll-margin-top: 72px; }
  header { position: sticky; top: 0; z-index: 5; align-items: center; padding: 12px 16px; }
  .brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .2em; }
  .brand img { border-radius: 50%; border: 1px solid var(--line); }
  .nav { display: flex; gap: 16px; margin-left: 12px; }
  .nav a { color: var(--dim); text-decoration: none; font-size: 13px; }
  .nav a:hover { color: var(--text); }
  @media (max-width: 760px) { .nav { display: none; } header .right { display: none; } }
  main { max-width: 1180px; margin: 0 auto; width: 100%; }

  .hero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 40px 4px 24px; }
  @media (max-width: 680px) { .hero { grid-template-columns: 1fr; padding-top: 24px; } }
  .hero-logo { width: 132px; height: 132px; border-radius: 50%; border: 1px solid var(--line); box-shadow: 0 0 60px rgba(255, 207, 63, .18); }
  .eyebrow { margin: 0 0 6px; color: var(--dim); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
  .hero h1 { margin: 0; font-size: clamp(40px, 8vw, 72px); letter-spacing: .14em; line-height: 1; font-family: ui-monospace, 'SF Mono', Consolas, monospace; }
  .lead { margin: 10px 0 12px; font-size: clamp(18px, 2.6vw, 24px); color: var(--main); }
  .hero-copy { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: #c9d2dc; }
  .ca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(1, 3, 14, .55); width: fit-content; max-width: 100%; }
  .ca-label { color: var(--dim); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
  .ca code { font-size: 13px; word-break: break-all; }
  .btn.small { padding: 5px 10px; font-size: 12px; }
  .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  a.btn { text-decoration: none; display: inline-block; }

  .prose { padding: 20px; }
  .prose p, .prose li, .prose dd { line-height: 1.6; color: #c9d2dc; font-size: 14px; }
  .prose h3 { margin: 0 0 6px; font-size: 15px; }
  .prose b { color: var(--text); }
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .steps li { border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: rgba(1, 3, 14, .35); }
  .steps p { margin: 0; }
  .steps .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--main); color: #111; font-weight: 800; font-size: 13px; margin-bottom: 8px; }
  .split-section { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: center; }
  @media (max-width: 820px) { .split-section { grid-template-columns: 1fr; } }
  .diagram { width: 100%; max-width: 380px; justify-self: center; }
  .diagram text { fill: var(--text); font: 11px ui-monospace, Consolas, monospace; text-anchor: middle; }
  .diagram .dg-cap { fill: var(--dim); font-size: 10px; }
  .dg-edges path { stroke: var(--line); stroke-width: 1.5; fill: none; }
  .dg-main { fill: var(--panel); stroke: var(--main); stroke-width: 2; }
  .dg-live { fill: var(--panel); stroke: var(--live); stroke-width: 2; }
  .dg-q { fill: var(--panel); stroke: var(--queued); stroke-width: 2; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  @media (max-width: 760px) { .two { grid-template-columns: 1fr; } }
  .feebar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin: 4px 0 14px; font-size: 11px; font-weight: 700; color: #111; }
  .feebar span { display: grid; place-items: center; text-transform: uppercase; letter-spacing: .08em; }
  .fb-vault { background: var(--main); } .fb-treasury { background: var(--queued); } .fb-meteora { background: var(--sup); color: var(--text); }
  .fees { display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px; margin: 0 0 12px; }
  .fees dt { font-size: 14px; } .fees dd { margin: 0; }
  @media (max-width: 600px) { .fees { grid-template-columns: 1fr; } .fees dd { margin-bottom: 8px; } }
  .checks { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
  .reality { border-color: rgba(255, 93, 108, .35); }
  #faq details { border-top: 1px solid var(--line); padding: 10px 0; }
  #faq summary { cursor: pointer; font-weight: 600; }
  #faq details p { margin: 8px 0 0; }
  /* ---- all launches ---- */
  #launches[hidden] { display: none; }
  .lx-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .lx-head h2 { margin: 0; }
  .lx-count { color: var(--text); letter-spacing: 0; margin-left: 4px; }
  .lx-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .seg button { background: transparent; color: var(--dim); border: 0; padding: 7px 11px; font: inherit; font-size: 12px; cursor: pointer; }
  .seg button + button { border-left: 1px solid var(--line); }
  .seg button.on { background: rgba(255, 207, 63, .14); color: var(--main); }
  #lxsearch { background: rgba(1, 3, 14, .7); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 13px; width: 240px; max-width: 100%; }
  #lxsearch:focus { outline: none; border-color: var(--main); }
  .lx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
  .lx { display: grid; grid-template-columns: 56px 1fr; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: rgba(1, 3, 14, .4); min-width: 0; }
  .lx img, .lx .ph { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--bg); border: 1px solid var(--line); }
  .lx .ph { display: grid; place-items: center; color: var(--dim); font-weight: 700; }
  .lx-top { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
  .lx-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lx-sym { color: var(--dim); font-size: 12px; }
  .tag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
  .tag.split { color: var(--main); border-color: rgba(255, 207, 63, .4); }
  .tag.community { color: var(--live); border-color: rgba(63, 224, 160, .4); }
  .tag.grad { color: var(--migrated); border-color: rgba(195, 139, 255, .45); }
  .lx-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--dim); margin-top: 3px; }
  .lx-meta b { color: var(--text); font-weight: 600; }
  .bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 7px; }
  .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--live), var(--main)); }
  .lx-links { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; margin-top: 7px; }
  .lx-links button { background: none; border: 0; padding: 0; color: var(--queued); font: inherit; cursor: pointer; }
  .lx-empty { grid-column: 1 / -1; color: var(--dim); font-size: 13px; padding: 18px 4px; }
  .lx-more { grid-column: 1 / -1; justify-self: center; }
  .section-title { margin: 12px 0 0; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }