:root{
  --ink: #0a0b0a;
  --ink-2: #101210;
  --card: #131513;
  --card-line: #23261f;
  --paper: #f6f5f1;
  --green: #5eeb78;
  --green-dim: #2c5c37;
  --gold: #ffc94d;
  --ash: #8d938c;
  --ash-dim: #565b56;
  --white: #f4f4f0;

  --display: 'Space Grotesk', ui-sans-serif, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --body: 'Inter', ui-sans-serif, sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  overflow-x:hidden;
  padding: 24px 16px 64px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.rings{ position:fixed; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ring{ position:absolute; border-radius:50%; border:1px solid rgba(94,235,120,0.06); }
.r1{ width:400px; height:400px; animation: breathe 7s ease-in-out infinite; }
.r2{ width:700px; height:700px; animation: breathe 7s ease-in-out infinite 0.6s; }
.r3{ width:1050px; height:1050px; animation: breathe 7s ease-in-out infinite 1.2s; }
.r4{ width:1400px; height:1400px; animation: breathe 7s ease-in-out infinite 1.8s; }
@keyframes breathe{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.02); } }

.foot{
  position:relative; z-index:1; margin-top:32px;
  font-family: var(--mono); font-size:11px; letter-spacing:.03em; color: var(--ash-dim);
  display:flex; gap:8px; align-items:center;
}
.foot a{ color:var(--ash); text-decoration:none; }
.foot a:hover{ color:var(--green); }
.foot .dot{ color:var(--ash-dim); }

.app{ position:relative; z-index:1; width:100%; max-width:640px; margin: 0 auto; }

/* ---- top bar ---- */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.brand-mark{ display:flex; align-items:center; gap:10px; }
.brand-mark img.bm-logo{ height:20px; object-fit:contain; }
.brand-mark img.bm-mascot{ width:26px; height:26px; border-radius:50%; object-fit:cover; border:1px solid var(--card-line); }
.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--mono); font-size:10.5px; letter-spacing:.04em;
  background: rgba(94,235,120,0.09); border:1px solid rgba(94,235,120,0.3);
  color: var(--green); padding:5px 10px; border-radius:999px;
}
.status-pill .pulse{ width:5px; height:5px; border-radius:50%; background: var(--green); animation: pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(94,235,120,.55); } 70%{ box-shadow:0 0 0 7px rgba(94,235,120,0); } 100%{ box-shadow:0 0 0 0 rgba(94,235,120,0); } }

/* ---- hero ---- */
.hero{ text-align:center; padding: 10px 0 30px; animation: rise .4s cubic-bezier(.16,1,.3,1); }
@keyframes rise{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform:none; } }
.hero-title{ font-family:var(--display); font-weight:700; font-size:30px; line-height:1.15; letter-spacing:-.01em; margin:0 0 10px; }
.hero-title .accent{ color: var(--green); }
.hero-sub{ color: var(--ash); font-size:14.5px; line-height:1.6; max-width:440px; margin: 0 auto; }

/* ---- section label ---- */
.section-label{
  font-family: var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ash); margin: 0 0 14px 4px; display:flex; align-items:center; gap:8px;
}
.section-label::after{ content:""; flex:1; height:1px; background: var(--card-line); }

/* ---- tool grid ---- */
.tool-grid{ display:flex; flex-direction:column; gap:12px; margin-bottom:34px; }
.tool-card{
  display:flex; align-items:center; gap:14px;
  background: var(--card); border:1px solid var(--card-line); border-radius:16px;
  padding:16px 18px; text-decoration:none; color: var(--white);
  transition: border-color .15s ease, transform .12s ease;
}
.tool-card:hover{ border-color: var(--green); transform: translateY(-1px); }
.tool-icon{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  background: rgba(94,235,120,0.09); border:1px solid rgba(94,235,120,0.2);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.tool-body{ flex:1; min-width:0; }
.tool-title{ font-family:var(--display); font-weight:700; font-size:15px; margin-bottom:2px; }
.tool-desc{ font-size:12.5px; color: var(--ash); line-height:1.45; }
.tool-arrow{ color: var(--ash); font-size:16px; flex-shrink:0; }
.tool-card:hover .tool-arrow{ color: var(--green); }

/* ---- reference entry banner ---- */
.ref-banner{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(135deg, rgba(94,235,120,0.1), rgba(94,235,120,0.02));
  border:1px solid rgba(94,235,120,0.25); border-radius:16px;
  padding:18px; margin-bottom:12px; cursor:pointer;
  transition: border-color .15s ease;
}
.ref-banner:hover{ border-color: var(--green); }
.ref-banner .ri{ font-size:26px; flex-shrink:0; }
.ref-banner .rb{ flex:1; }
.ref-banner .rb-title{ font-family:var(--display); font-weight:700; font-size:16px; margin-bottom:3px; }
.ref-banner .rb-sub{ font-size:12.5px; color:var(--ash); }
.ref-banner .ra{ color: var(--green); font-size:18px; flex-shrink:0; }

/* ---- reference page ---- */
.ref-header{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.back-btn{
  border:1px solid var(--card-line); background: var(--card); color: var(--white);
  border-radius:10px; padding:9px 13px; font-family:var(--body); font-size:13px; font-weight:600;
  cursor:pointer; display:flex; align-items:center; gap:6px; flex-shrink:0;
}
.back-btn:hover{ border-color: var(--ash); }
.ref-header h1{ font-family:var(--display); font-weight:700; font-size:19px; margin:0; }

.accordion{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.acc-item{ background: var(--card); border:1px solid var(--card-line); border-radius:14px; overflow:hidden; }
.acc-head{
  display:flex; align-items:center; gap:12px; padding:15px 16px; cursor:pointer;
  user-select:none;
}
.acc-icon{ font-size:18px; flex-shrink:0; width:26px; text-align:center; }
.acc-title{ flex:1; font-family:var(--display); font-weight:600; font-size:14.5px; }
.acc-chevron{ color: var(--ash); font-size:12px; transition: transform .2s ease; flex-shrink:0; }
.acc-item.open .acc-chevron{ transform: rotate(180deg); color: var(--green); }
.acc-body{
  max-height:0; overflow:hidden; transition: max-height .25s ease;
  padding: 0 16px;
}
.acc-item.open .acc-body{ padding: 0 16px 16px; }
.acc-body-inner{ font-size:13.5px; color: var(--ash); line-height:1.7; }
.acc-body-inner b{ color: var(--white); font-weight:600; }
.acc-body-inner .stat-row{
  display:flex; justify-content:space-between; gap:10px;
  padding:9px 0; border-bottom:1px dashed var(--card-line); font-size:12.5px;
}
.acc-body-inner .stat-row:last-child{ border-bottom:0; }
.acc-body-inner .stat-label{ color: var(--ash); font-family:var(--mono); }
.acc-body-inner .stat-value{ color: var(--white); font-weight:600; text-align:right; }
.acc-body-inner .note{
  margin-top:10px; padding:10px 12px; background: var(--ink-2); border:1px solid var(--card-line);
  border-radius:10px; font-size:12px; color: var(--ash);
}
.acc-body-inner a{ color: var(--green); text-decoration:none; }
.acc-body-inner a:hover{ text-decoration:underline; }

.cta-row{ display:flex; gap:10px; }
.btn{ border:0; border-radius:12px; padding:13px 18px; font-family: var(--display); font-weight:600; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn-primary{ background: var(--green); color:#06210c; flex:1; }
.btn-ghost{ background: transparent; border:1px solid var(--card-line); color: var(--white); flex:1; }

@media (max-width:480px){
  .hero-title{ font-size:25px; }
  .tool-card{ padding:14px; }
}