/* 页面基础 */
html, body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: Inter, Arial, sans-serif;
}
canvas { display: block; }

/* ===== 双栏布局：左 1 / 右 2 ===== */
.start-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 28px;
  height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 24px;
  box-sizing: border-box;
}

/* 左栏文案 */
.start-sidebar h1 {
  font-size: clamp(28px, 5.2vw, 56px);
  line-height: 1.05;
  margin: 0 0 8px;
  font-weight: 800;
  color: #FFD700;
}
.start-sidebar .lead { color:#cfcfcf; margin:0 0 20px; }
.start-sidebar h3 { margin:18px 0 8px; font-size:14px; letter-spacing:.08em; color:#9CFF6A; }
.start-sidebar p { color:#d6d6d6; font-size:14px; line-height:1.6; margin:0 0 10px; }
.bullets { list-style:disc; margin:6px 0 14px 18px; color:#cfcfcf; font-size:14px; line-height:1.6; }

/* Scenario 一行：chip + 小字解释 */
.scenario { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.scenario .desc { font-size:12px; color:#9ad39a; }
.hint { color:#9ad39a; font-size:12px; margin-top:6px; }

/* 右栏卡片区 */
.start-cards {
  overflow:auto; padding-right:6px;
  display:grid; grid-template-columns:repeat(3, minmax(180px, 1fr));
  gap:22px; align-content:start;
}
.card { background:#0d0d0d; border:1px solid #222; border-radius:14px; padding:10px; cursor:pointer; outline:none;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; text-decoration:none; }
.card:hover { border-color:#39ff14; box-shadow:0 0 0 2px #39ff1412 inset; transform:translateY(-2px); }
.card img { width:100%; aspect-ratio:3/4; object-fit:contain; display:block; border-radius:10px; background:#0b0b0b; }

/* 响应式 */
@media (max-width:1200px){ .start-layout{grid-template-columns:1.1fr 1.9fr;} .start-cards{grid-template-columns:repeat(2, minmax(160px,1fr));} }
@media (max-width:900px){ .start-layout{grid-template-columns:1fr; height:auto;} .start-cards{max-height:none; grid-template-columns:repeat(2, minmax(150px,1fr));} }
@media (max-width:560px){ .start-cards{grid-template-columns:1fr;} }

/* 统一 chip */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#133a20; color:#8BFFA8; border:1px solid #1f6a36;
  padding:6px 12px; border-radius:16px; font-size:12px; line-height:1;
  text-decoration:none; cursor:pointer; user-select:none;
}
.chip:hover{ box-shadow:0 0 0 2px #39ff1412 inset; }

/* 变体 */
.chip.yellow{ background:#3a2b00; color:#FFD700; border:1px solid #8B8000; }  /* Export */
.chip.white { background:#222;   color:#fff;    border:1px solid #aaa; }     /* Menu */