.sy-hub {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--terra);
    text-decoration: none;
    margin: 0 0 12px;
  }
  .sy-hub:hover { color: var(--terra-soft); }

  

  h1 { font-size: 2.3rem; line-height: 1.15; margin: 0 0 10px; }
  section > h2 {
    font-size: 1.7rem; margin: 56px 0 14px; padding-bottom: 8px;
    border-bottom: 3px solid var(--ochre); display: inline-block;
  }
  h3 { font-size: 1.2rem; margin: 30px 0 8px; color: var(--terra); }
  h4 { font-size: 1.05rem; margin: 22px 0 6px; color: var(--terra-soft); }
  p { margin: 0 0 14px; }
  .lead { font-size: 1.12rem; color: #4a3728; }

  
  
  
  

  .card {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow);
    margin: 18px 0;
  }
  .note {
    border-left: 5px solid var(--ochre); background: #fbf1da;
    padding: 12px 18px; border-radius: 8px; margin: 18px 0; color: #5a4a34;
  }
  .tip { border-left-color: var(--green); background: #eef3e7; }

  table { border-collapse: collapse; width: max-content; max-width: 100%; margin: 16px 0; font-size: 0.96rem; background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { background: #f3e6cf; font-weight: 700; }
  tr:last-child td { border-bottom: none; }

  
  .b-dha   { background: var(--ochre); color:#3d2b1f; }
  .b-dhin  { background: var(--terra-soft); }
  .b-na    { background: var(--terra); }
  .b-tin   { background: var(--green); }
  .b-ge    { background: var(--blue); }
  .b-ka    { background: #6b6152; }
  .b-te    { background: #8a5a2b; }
  

  .grid-wrap { overflow-x: auto; margin: 14px 0 6px; }
  table.grid { width: auto; min-width: max-content; max-width: 100%; text-align: center; }
  table.grid th, table.grid td { text-align: center; white-space: nowrap; padding: 8px 10px; }
  table.grid thead th { background: #efe0c6; color: var(--muted); font-weight: 600; font-size: .82rem; }
  table.grid .sam { box-shadow: inset 0 3px 0 var(--terra); }
  .hands { font-size:.9rem; color: var(--muted); margin: 2px 0 14px; }
  
  
  

  ul.check { list-style: none; padding-left: 0; }
  ul.check li { padding: 6px 0 6px 30px; position: relative; }
  ul.check li::before { content: "\2610"; position: absolute; left: 4px; color: var(--terra); font-size: 1.1rem; }

  .badge { display:inline-block; background: var(--terra); color:#fff; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius: 20px; letter-spacing:.04em; vertical-align: middle; margin-left: 8px; }

  code { background: #f3e6cf; padding: 1px 6px; border-radius: 5px; font-size: .9em; }
  

  
  
  
  
  

  .playbtn { background: var(--terra); color:#fff; border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:.75rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0; }
  .playbtn:hover { background: var(--terra-soft); }
  .playbtn.playing { background: var(--green); }
  
  
  table.grid td .bol { cursor: pointer; }

  @media (max-width: 820px) {
    
    h1 { font-size: 1.8rem; }
    }

.btn.nav { background: var(--terra); color: #fff; }
.row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }