.sur-hero { text-align:center; margin: 8px 0 4px; }
  .sur-hero .big { font-size:4.2rem; line-height:1; font-weight:700; color:var(--accent); }
  .char-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:18px 0; }
  .char-grid .cell { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; }
  .char-grid .cell .k { font-size:.82rem; color:var(--muted); }
  .char-grid .cell .v { font-size:1.05rem; margin-top:2px; font-weight:600; color:var(--ink); }
  .sample { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .sample a { display:inline-block; background:var(--chip); color:var(--accent-ink); border-radius:8px;
              padding:6px 12px; text-decoration:none; font-size:.95rem; min-height:38px; line-height:26px; }
  .sample a:hover { background:var(--accent-soft); }
  .sample span { display:inline-block; background:var(--chip); color:var(--accent-ink); border-radius:8px;
                 padding:6px 12px; font-size:.95rem; }
  .sec { margin-top:20px; }
  .sec h2 { font-size:1.15rem; border-left:3px solid var(--accent); padding-left:10px; color:var(--ink); }
  .sec .hint { color:var(--muted); font-size:.9rem; margin:6px 0 0; }
  .nav2 { display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
  .nav2 a { color:var(--accent-ink); text-decoration:none; }