@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
    
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 24px 0 0 32px;
      font-family: "Permanent Marker", cursive;
      color: #222;
      background: #fefefe;
      display: grid;
      /* place-items: center; */
    }

    .app {
      width: 100%;
      max-width: 600px;
    }

    .intro {
      display: flex;
      flex-direction: row;
      justify-items: center;
    }

    .title { text-align: left;}
    .title h1 { font-size: clamp(28px, 5vw, 28px); font-weight: 600; }

    .top {
      padding-left: 20px;
      padding-right: 20px;
      margin: 0;
      font-family: "Open Sans", sans-serif;
      font-size: 16px;
    }

    .columns { display: flex; flex-direction: column; gap: 24px; }

 
    .card {
      border: 2px solid #000;
      border-radius: 12px;
      padding: 10px;
      height: 100%;
    }
    .card legend { font-weight: 700; font-size: 20px; padding: 0 6px; color: #111; }

    /* Board layout: slider left (vertical), chips right */
    .board {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }

   .slider-wrap { width: 100%; }
.slider-wrap input[type="range"] {
width: 100%;
}

    .circles {
      list-style: none; margin: 0; padding: 0;
      display: flex; flex-direction: row;
      align-items: center; gap: 30px;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    /* Rounded rectangle chips */
    .chip {
      width: clamp(44px, 20vw, 44px);
      height: clamp(44px, 20vw, 44px);
      border-radius: 50%;
      display: grid; place-items: center;
      /* background: #fff;  */
      border: 2px solid;
      border-color: #000000;
      font-weight: 700; font-size: clamp(15px, 4vw, 19px);
      letter-spacing: 0.2px;
      cursor: pointer; user-select: none;
    }
  
input[type="range"] {
--thumb: #999;
appearance: none;
height: 6px; border-radius: 999px; background: #ccc; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none; width: 18px; height: 18px; border-radius: 50%;
background: var(--thumb);
border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 18px; height: 18px; border-radius: 50%;
background: var(--thumb);
border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
cursor: pointer;
}

    /* Actions row */
    .actions {
      margin-top: 14px;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: stretch;
    }
    .actions textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 14px;
      resize: vertical;
      min-height: 40px;
    }
    .btn-magenta {
      background: #fff; color: #000; border: 2px solid #000; border-radius: 10px;
      padding: 8px 12px; font-weight: 700; font-size: 20px; cursor: pointer;
      font-family: "Permanent Marker", cursive;
      /* box-shadow: 0 2px 6px rgba(208,0,160,0.3); */
    }
    /* .btn-magenta:focus { outline: 3px solid rgba(208,0,160,0.35); outline-offset: 2px; } */

    /* Responsive adjustments */
    @media (max-width: 600px) {
      .actions {flex-direction: column;}
      .columns { flex-direction: column; align-items: center; justify-items: center;}
      .board { grid-template-columns: 24px 1fr; min-height: auto; }
      .chip { width: 40px; height: 40px; font-size: 14px; }
    }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;  white-space: nowrap;}