:root{
    --bg: #15171c;
    --panel: #1c1f26;
    --panel-line: rgba(255,255,255,0.07);
    --ink: #eae7de;
    --muted: #868c99;
    --maj: #d9a441;
    --min: #5f92c4;
    --dim: #c15f5f;
    --maj-bg: rgba(217,164,65,0.13);
    --min-bg: rgba(95,146,196,0.13);
    --dim-bg: rgba(193,95,95,0.13);
    --neu: #7fb0a6;
    --neu-bg: rgba(127,176,166,0.13);
    --aug: #9d7fd1;
    --aug-bg: rgba(157,127,209,0.13);
  }

  *{ box-sizing:border-box; }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'Space Grotesk', sans-serif;
    padding:32px 20px 60px;
    -webkit-font-smoothing:antialiased;
  }

  .app{ max-width:900px; margin:0 auto; }

  header h1{
    font-size:1.6rem;
    font-weight:700;
    margin:0 0 4px;
    letter-spacing:0.01em;
  }
  header p{
    margin:0 0 28px;
    color:var(--muted);
    font-size:0.92rem;
  }

  /* ---------- controls ---------- */
  .controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:22px;
    margin-bottom:26px;
  }

  .keyboard{
    position:relative;
    width:280px;
    height:78px;
    flex:0 0 auto;
  }

  .dropdown-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    flex-basis:100%;
  }
  .wkey, .bkey{
    position:absolute;
    top:0;
    border:1px solid var(--panel-line);
    cursor:pointer;
    border-radius:0 0 4px 4px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-bottom:5px;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.62rem;
    color:var(--muted);
    transition:background .15s ease, color .15s ease;
  }
  .wkey{
    height:78px;
    background:#e9e7e0;
    color:#8a8a86;
    z-index:1;
  }
  .wkey:hover{ background:#ded9cb; }
  .bkey{
    height:48px;
    background:#0c0d10;
    color:#7c8290;
    z-index:2;
  }
  .bkey:hover{ background:#22242b; }
  .wkey.active{ background:var(--maj); color:#1a1300; }
  .bkey.active{ background:var(--maj); color:#1a1300; }

  .chord-select{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:0.85rem;
    padding:9px 14px;
    background:var(--panel);
    color:var(--ink);
    border:1px solid var(--panel-line);
    border-radius:8px;
    cursor:pointer;
  }
  .chord-select:focus{ outline:2px solid var(--maj); outline-offset:1px; }
  .chord-select:disabled{ opacity:0.4; cursor:not-allowed; }

  .icon-btn{
    padding:9px 14px;
    line-height:1;
    font-size:0.85rem;
  }

  /* ---------- interval readout ---------- */
  .interval-readout{
    font-family:'IBM Plex Mono', monospace;
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:26px;
    overflow-x:auto;
  }
  .ir-row{
    display:flex;
    align-items:center;
    white-space:nowrap;
  }
  .ir-note{
    font-size:1.05rem;
    font-weight:600;
    padding:3px 9px;
  }
  .ir-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    color:var(--muted);
    font-size:0.7rem;
    padding:0 6px;
  }
  .ir-step .letter{ letter-spacing:0.05em; }
  .ir-line{
    width:26px;
    height:1px;
    background:var(--panel-line);
    margin:3px 0;
  }
  .interval-caption{
    margin-top:10px;
    font-family:'Space Grotesk', sans-serif;
    font-size:0.78rem;
    color:var(--muted);
  }

  /* ---------- matrix ---------- */
  .matrix-wrap{
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:10px;
    overflow-x:auto;
  }
  table{
    border-collapse:collapse;
    width:100%;
    min-width:640px;
  }
  th{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--muted);
    text-align:left;
    padding:12px 10px 8px;
    border-bottom:1px solid var(--panel-line);
  }
  th.center, td.center{ text-align:center; }
  td{
    font-family:'IBM Plex Mono', monospace;
    padding:9px 10px;
    border-bottom:1px solid var(--panel-line);
    font-size:0.95rem;
    text-align:center;
    color:var(--muted);
  }
  #matrixBody td{ cursor:pointer; }
  #matrixBody td:hover{ filter:brightness(1.35); }
  tr:last-child td{ border-bottom:none; }
  tr.in-progression{ background: rgba(255,255,255,0.05); }
  td.roman{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    text-align:left;
    color:var(--ink);
    font-size:0.9rem;
  }
  td.chordname{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    text-align:right;
    font-size:0.92rem;
  }
  td.tone{ font-weight:600; border-radius:6px; color:var(--ink); }
  td.tone.q-maj{ background:var(--maj-bg); color:var(--maj); }
  td.tone.q-min{ background:var(--min-bg); color:var(--min); }
  td.tone.q-dim{ background:var(--dim-bg); color:var(--dim); }
  td.tone.q-neutral{ background:var(--neu-bg); color:var(--neu); }
  td.tone.q-aug{ background:var(--aug-bg); color:var(--aug); }
  .chordname.q-maj{ color:var(--maj); }
  .chordname.q-min{ color:var(--min); }
  .chordname.q-dim{ color:var(--dim); }
  .chordname.q-neutral{ color:var(--neu); }
  .chordname.q-aug{ color:var(--aug); }

  footer{
    margin-top:20px;
    font-size:0.8rem;
    color:var(--muted);
  }

  .site-footer{
    margin-top:8px;
    padding-top:14px;
    border-top:1px solid var(--panel-line);
    font-size:0.72rem;
    text-align:center;
  }
  .site-footer a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
  .site-footer a:hover{ color:var(--maj); }

  /* ---------- melody generator ---------- */
  .melody-section{ margin:26px 0; }

  .params-panel{
    display:grid;
    grid-template-columns:112px 1fr 56px;
    align-items:center;
    gap:9px 12px;
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:10px;
    padding:14px 16px;
    margin-bottom:14px;
  }
  .param-row{ display:contents; }
  .param-row label{ font-size:0.78rem; color:var(--muted); }
  .params-panel select{
    font-family:'Space Grotesk', sans-serif;
    font-size:0.78rem;
    padding:6px 8px;
    background:var(--bg);
    color:var(--ink);
    border:1px solid var(--panel-line);
    border-radius:6px;
  }
  .params-panel input[type=range]{
    width:100%;
    accent-color:var(--maj);
  }
  .param-value{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.72rem;
    color:var(--ink);
    text-align:right;
  }

  .melody-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
  }

  .btn{
    font-family:'Space Grotesk', sans-serif;
    font-weight:600;
    font-size:0.85rem;
    padding:9px 16px;
    background:var(--maj);
    color:#1a1300;
    border:none;
    border-radius:8px;
    cursor:pointer;
  }
  .btn.secondary{
    background:var(--panel);
    color:var(--ink);
    border:1px solid var(--panel-line);
  }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; }

  .bpm-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.85rem;
    color:var(--muted);
  }
  .bpm-input{
    font-family:'IBM Plex Mono', monospace;
    width:60px;
    padding:8px 10px;
    background:var(--panel);
    color:var(--ink);
    border:1px solid var(--panel-line);
    border-radius:8px;
  }

  .opposing-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.85rem;
    color:var(--muted);
    cursor:pointer;
    user-select:none;
  }
  .opposing-toggle input{ accent-color:var(--maj); width:15px; height:15px; cursor:pointer; }

  .layer-toggles{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
    margin-bottom:14px;
  }

  .melody-display{
    background:var(--panel);
    border:1px solid var(--panel-line);
    border-radius:10px;
    padding:10px 6px;
    overflow-x:auto;
    overflow-y:auto;
    max-height:440px;
  }
  .melody-placeholder{ color:var(--muted); font-size:0.85rem; padding:10px 12px; display:block; }

  .tracker-table{
    border-collapse:collapse;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    width:100%;
  }
  .tracker-table th{
    text-align:left;
    color:var(--muted);
    font-size:0.65rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    padding:4px 12px;
    position:sticky;
    top:0;
    background:var(--panel);
  }
  .tracker-rownum{ color:var(--muted); padding:2px 10px; opacity:0.6; }
  .tracker-marker{ width:14px; color:var(--maj); font-weight:700; padding:2px 0; }
  .tracker-cell{ padding:2px 14px; color:var(--muted); white-space:nowrap; }
  .tracker-cell.note-onset{ color:var(--ink); font-weight:600; }
  .tracker-cell.note-sustain{ color:var(--muted); }
  .tracker-cell.note-rest{ color:var(--muted); opacity:0.35; }
  .tracker-cell.drum-cell.note-onset{ color:var(--neu); font-weight:600; }
  .tracker-row.beat-one{ background:rgba(255,255,255,0.035); }
  .tracker-row.beat-start td{ border-top:1px solid rgba(255,255,255,0.05); }
  .tracker-row.bar-start td{ border-top:1px solid var(--panel-line); }
  .tracker-row.playhead{ background:var(--maj-bg); }
  .tracker-row.playhead .tracker-cell.note-onset{ color:var(--maj); }

  @media (max-width:480px){
    .keyboard{ width:230px; height:66px; }
    .wkey{ height:66px; }
    .bkey{ height:40px; }
  }