/* 
  Octarule Project
  Author: Keith (Arc.Keith)
  Created: July 2025
  License: Creative Commons Attribution 4.0 International (CC BY 4.0)
  https://creativecommons.org/licenses/by/4.0/
*/

    body {
      background: #111;
    }

    h1 {
      margin-bottom: 1em;
    }

    .controls {
      margin: 1em auto;
    }

    button {
      background: #333;
      border: none;
      color: #fff;
      padding: 0.7em 1.2em;
      margin: 0.3em;
      font-size: 1em;
      border-radius: 0.4em;
      cursor: pointer;
    }

    input[type="text"], select {
      background: #222;
      color: #0f0;
      font-family: monospace;
      border: 1px solid #555;
      padding: 0.4em;
      text-align: center;
    }

    .counter {
      font-size: 2em;
      margin-top: 1em;
      color: #0f0;
      font-family: monospace;
    }

    body#home .sequencer {
      display: grid;
      grid-template-columns: minmax(80px, 1fr) repeat(8, minmax(0, 1fr));
      gap: 0.3em;
      max-width: 600px;
      margin: 0 auto;
      justify-content: center;
    }
    #seq-title {
      font-family: 'Tomorrow', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 2rem;       
      font-weight: 600;         
      color: #c0c1db;           /* Brand color */
      text-shadow: 0 0 4px rgba(192, 193, 219, .5);
      margin-top: 1rem;
      margin-bottom: 0.75rem;
      line-height: 1.2;
      text-align: center;    
      letter-spacing: -0.5px;
    }

    body#home .track-label {
      text-align: right;
      padding-right: 0.5em;
      font-weight: bold;
      color: #aaa;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    
    body#home .step {
      aspect-ratio: 1 / 1;
      width: 100%;
      background: #333;
      border: 2px solid #555;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

   
    body#home .step.active {
      background: #0f0;
      color: #000;
    }

    body#home .step.playing {
      border-color: #0ff;
    }

    .label-group {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    

/* ====== synth hide for the info icon switch ====== */
    .synth-app {
      display: none;
      animation: fadeIn 0.3s ease-in-out;
      text-align: center;
    }
    .synth-app.show {
      display: block;
    }



    .synth-app{
    margin-top: 2rem;
    }