:root {
      --track-color: #ccc;
      --bank-saturation: 70%;
      --bank-lightness: 50%;
      --primary-color: hsl(0, 70%, 50%);
      --text-color: #ffffff;
      --background-color: hsl(var(--primary-color-hue, 0), 10%, 95%);
      --header-bg: hsl(var(--primary-color-hue, 0), 10%, 95%);
      --text-primary: #333;
      --svg-filter: none;
    }
    [data-theme="dark"] {
      --track-color: #555;
      --bank-lightness: 60%;
      color-scheme: dark;
      --background-color: #1a1a1a;
      --header-bg: #1a1a1a;
      --text-primary: #e0e0e0;
      --primary-color: hsl(var(--primary-color-hue, 0), 70%, 60%);
      --text-color: #000000;
      --svg-filter: invert(100%) grayscale(100%);
    }
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: var(--background-color);
      color: var(--text-primary);
    }
    .status-header {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      background-color: var(--header-bg);
      color: var(--text-primary);
      padding: 10px;
      border-radius: 5px;
    }
    .title-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    #notification-bubble {
      padding: 10px 10px;
      background: lightgreen;
      color: darkgreen;
      border: 3px solid green;
      border-radius: 20px;
      font-size: 1.1em;
      font-weight: bold;
      display: none;
      margin-top: 5px;
      display: flex;
      align-items: center;
    }
    [data-theme="dark"] #notification-bubble.connected {
      background: #228b22;
      border-color: #006400;
      color: #e0e0e0;
    }
    [data-theme="dark"] #notification-bubble.disconnected {
      background: #8b0000;
      border-color: #ff4040;
      color: #e0e0e0;
    }
    .connected#notification-bubble {
      background: lightgreen;
      border: 3px solid green;
    }
    .disconnected#notification-bubble {
      background: lightcoral;
      border: 3px solid red;
    }
    .connected#notification-bubble #dot {
      margin-right: 8px;
      font-size: 1.2em;
      color: green;
    }
    [data-theme="dark"] .connected#notification-bubble #dot {
      margin-right: 8px;
      font-size: 1.2em;
      color: lightgreen;
    }
    [data-theme="dark"] #dot.connected {
      color: #00ff00;
    }
    [data-theme="dark"] #dot.disconnected {
      color: #ff4040;
    }
    .disconnected#notification-bubble #dot {
      color: red;
    }
    #connection-text {
      font-size: 1.1em;
      font-weight: bold;
    }
    #header {
      margin: 20px 0;
      padding: 10px;
      background-color: var(--header-bg);
      border-radius: 5px;
      color: var(--text-primary);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 20px;
    }
    .controls-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      min-width: 200px;
    }
    .svg-container {
      flex: 0 0 auto;
      height: 20vw;
      max-width: 80vw;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .svg-container img {
      width: 150%;
      height: 150%;
      object-fit: contain;
      filter: var(--svg-filter);
    }
    .section {
      margin-bottom: 2px;
    }
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .button_div {
      margin-right: 10px;
    }
    button {
      padding: 8px;
      border: none;
      border-radius: 5px;
      background-color: var(--primary-color);
      color: var(--text-color);
      cursor: pointer;
      transition: opacity 0.2s, background-color 0.2s;
    }
    button:hover {
      background-color: hsl(var(--primary-color-hue, 0), 70%, 45%);
    }
    [data-theme="dark"] button:hover {
      background-color: hsl(var(--primary-color-hue, 0), 70%, 55%);
    }
    button.inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
      background-color: #ccc;
    }
    [data-theme="dark"] button.inactive {
      background-color: #555;
    }
    button.active {
      opacity: 1;
      pointer-events: auto;
    }
    #bank_number_selection {
      padding: 8px;
      border: none;
      border-radius: 5px;
      background-color: var(--primary-color);
      color: var(--text-color);
      cursor: pointer;
    }
    #bank_number_selection:hover {
      background-color: hsl(var(--primary-color-hue, 0), 70%, 40%);
    }
    [data-theme="dark"] #bank_number_selection:hover {
      background-color: hsl(var(--primary-color-hue, 0), 70%, 55%);
    }
    #bank_number_selection.inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
      background-color: #ccc;
    }
    [data-theme="dark"] #bank_number_selection.inactive {
      background-color: #555;
    }
    #bank_number_selection.active {
      opacity: 1;
      pointer-events: auto;
    }
    input[type="range"] {
      -webkit-appearance: none;
      width: 150px;
      height: 6px;
      border-radius: 5px;
      background: linear-gradient(to right, var(--primary-color, hsl(0, 70%, 50%)) 0%, var(--primary-color, hsl(0, 70%, 50%)) 0%, #ccc 0%, #ccc 100%);
      outline: none;
      transition: opacity 0.2s;
    }
    [data-theme="dark"] input[type="range"] {
      background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 0%, #555 0%, #555 100%);
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--primary-color);
      cursor: pointer;
    }
    input[type="range"]::-moz-range-track {
      height: 6px;
      border-radius: 5px;
      background: linear-gradient(to right, var(--primary-color, hsl(0, 70%, 50%)) 0%, var(--primary-color, hsl(0, 70%, 50%)) 0%, #ccc 0%, #ccc 100%);
    }
    [data-theme="dark"] input[type="range"]::-moz-range-track {
      background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 0%, #555 0%, #555 100%);
    }
    input[type="range"]::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--primary-color);
      cursor: pointer;
    }
    input[type="range"].inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
      background: #ccc;
    }
    [data-theme="dark"] input[type="range"].inactive {
      background: #555;
    }
    input[type="range"].active {
      opacity: 1;
      pointer-events: auto;
    }
    input[type="checkbox"].inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
    }
    input[type="checkbox"].active {
      opacity: 1;
      pointer-events: auto;
    }
    select.inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
      background-color: #ccc;
    }
    [data-theme="dark"] select.inactive {
      background-color: #555;
    }
    select.active {
      opacity: 1;
      pointer-events: auto;
    }
    /* the value boxes beside the sliders: their colours live here rather than inline, so
       the dark theme can set its own (an inline light background left dark mode's
       white text on near-white) */
    input[type="number"] {
      background-color: hsl(var(--primary-color-hue, 0), 10%, 95%);
      color: #333;
    }
    [data-theme="dark"] input[type="number"] {
      background-color: #333;
      color: #e0e0e0;
    }
    input[type="number"].inactive {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
      background-color: #ccc;
    }
    [data-theme="dark"] input[type="number"].inactive {
      background-color: #555;
    }
    input[type="number"].active {
      opacity: 1;
      pointer-events: auto;
      background-color: hsl(var(--primary-color-hue, 0), 10%, 95%);
    }
    [data-theme="dark"] input[type="number"].active {
      background-color: #333;
    }
    a {
      color: var(--primary-color);
      text-decoration: none;
    }
    [data-theme="dark"] a {
      color: hsl(var(--primary-color-hue, 0), 70%, 60%);
    }
    a:hover {
      text-decoration: underline;
    }
    details summary:hover {
      color: var(--primary-color);
    }
    input[type="text"][readonly] {
      border: none;
      background: transparent;
      color: var(--text-primary);
    }
    /* Default single-column layout for smartphones */
    #parameters {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    details {
      width: 100%;
      margin: 0;
      padding: 8px;
      border: none;
      border-radius: none;
      box-sizing: border-box;
    }
    /* Three-column grid layout for larger screens */
    @media screen and (min-width: 768px) {
      #parameters {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
        width: 100%;
        max-width: 1600px;
        margin: 0 auto;
      }
      details {
        width: 100%;
        max-width: 450px;
        margin: 0;
        padding: 8px;
        box-sizing: border-box;
        overflow-x: auto;
      }
      /* Fallback for older browsers */
      @supports not (display: grid) {
        #parameters {
          display: flex;
          flex-wrap: wrap;
          gap: 30px;
        }
        details {
          flex: 1 1 calc(33.33% - 30px);
          max-width: 400px;
          box-sizing: border-box;
        }
      }
    }
    @media screen and (max-width: 767px) {
      .svg-container {
        max-width: 100%;
        height: 100%;
      }
    }
    /* custom scale: one checkbox per chromatic degree, in two rows of six */
    .degree-row {
      display: grid;
      grid-template-columns: repeat(6, auto);
      gap: 2px 6px;
      margin: 0 8px;
    }
    .degree {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.8em;
    }
    /* the label of the value a double tap applies, when its target is a dropdown */
    .option-hint {
      margin-left: 6px;
      font-size: 0.85em;
      opacity: 0.8;
      white-space: nowrap;
    }
    /* each section fills its column (the generated markup asks for fit-content, which on a
       laptop-width window ran the sections into each other), and in a row the slider is what
       gives way, so a row always fits its section */
    #parameters details {
      width: auto !important;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }
    #parameters div[style*="display: flex"] > label {
      flex-shrink: 0;
    }
    #parameters input[type="range"] {
      width: auto !important;
      flex: 1 1 60px;
      min-width: 0;
      max-width: 150px;
    }
    #parameters select {
      width: auto !important;
      flex: 1 1 90px;
      min-width: 0;
      max-width: 150px;
    }
    /* two columns until there is room for three */
    @media screen and (min-width: 768px) and (max-width: 1279px) {
      #parameters {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
    /* phones: a narrower label too */
    @media screen and (max-width: 767px) {
      #parameters div[style*="display: flex"] > label {
        width: 120px !important;
      }
      .degree-row {
        grid-template-columns: repeat(4, auto);
      }
    }
    #theme-select {
      padding: 8px;
      border: none;
      border-radius: 5px;
      background-color: var(--primary-color);
      color: var(--text-color);
      cursor: pointer;
    }
    /* a theme's tagline under the title: one line while disconnected, another once connected */
    .theme-tagline { display: none; }
    .theme-tagline .on { display: none; }
    .status-header:has(#notification-bubble.connected) .theme-tagline .on { display: inline; }
    .status-header:has(#notification-bubble.connected) .theme-tagline .off { display: none; }

    /* The bank sheet: every bank read off the minichord, to move them around,
       set one setting in all of them, or apply a profile. Drawn from the page's
       own colours, so each theme carries it. */
    .bank-sheet {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      background-color: rgba(0, 0, 0, 0.45);
      align-items: flex-start;
      justify-content: center;
      overflow-y: auto;
      padding: 4vh 16px;
      box-sizing: border-box;
    }
    .bank-sheet.open {
      display: flex;
    }
    .bank-sheet-card {
      background: var(--background-color);
      color: var(--text-primary);
      border-radius: 8px;
      width: 100%;
      max-width: 680px;
      padding: 16px;
      box-sizing: border-box;
      outline: none;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    }
    .bank-sheet-card h5 {
      margin: 14px 0 6px;
      font-size: 1.1em;
    }
    .bank-sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .bank-sheet-head h5 {
      margin: 0;
      font-size: 1.5em;
    }
    .bank-sheet-intro,
    .bank-status {
      line-height: 1.35;
      margin: 8px 0;
    }
    .bank-status:empty {
      display: none;
    }
    .bank-sheet-stale {
      line-height: 1.35;
      margin: 8px 0;
      padding: 8px;
      border-radius: 5px;
      border: 2px solid orange;
    }
    .bank-btn {
      white-space: nowrap;
    }
    .bank-btn.primary {
      font-weight: bold;
    }
    .bank-btn:disabled {
      opacity: 0.4;
      cursor: default;
    }
    .bank-btn.bank-x {
      background: none !important;
      color: var(--text-primary) !important;
      font-size: 1.3em;
      padding: 0 6px;
    }
    .bank-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 6px;
      margin: 8px 0;
    }
    .bank-cell {
      display: flex;
      align-items: center;
      gap: 6px;
      border: 2px solid var(--track-color);
      border-radius: 5px;
      padding: 5px;
      cursor: grab;
      min-width: 0;
    }
    .bank-cell.dirty {
      border-style: dashed;
      border-color: var(--primary-color);
    }
    .bank-cell.dragging {
      opacity: 0.4;
    }
    .bank-cell.over {
      outline: 2px solid var(--text-primary);
    }
    .bank-swatch {
      flex: 0 0 auto;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid var(--text-primary);
    }
    .bank-num {
      flex: 0 0 1.6em;
      font-weight: bold;
    }
    .bank-name {
      flex: 1;
      min-width: 0;
      font: inherit;
      border: none !important;
      border-bottom: 1px solid transparent !important;
      background: transparent !important;
      color: var(--text-primary);
      padding: 0;
    }
    .bank-name:focus {
      outline: none;
      border-bottom-color: var(--text-primary) !important;
    }
    .bank-bulk {
      border-top: 1px solid var(--track-color);
      margin-top: 12px;
    }
    .bank-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 8px;
      padding: 3px 0;
    }
    /* the name takes the line to itself when the row is too narrow for both */
    .bank-row-name {
      flex: 1 1 12em;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    .bank-row-val {
      font-family: monospace;
      text-align: right;
    }
    .bank-picker {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
    }
    .bank-picker select,
    .bank-value input[type="number"] {
      padding: 5px;
      max-width: 100%;
    }
    .bank-picker > select {
      flex: 1 1 14em;
      min-width: 0;
    }
    .bank-value {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .bank-value select {
      max-width: 18em;
    }
    .bank-value input[type="number"] {
      width: 6em;
    }
    .bank-degrees {
      display: flex;
      flex-wrap: wrap;
      width: 13em;
      row-gap: 3px;
    }
    .bank-degree {
      flex: 0 0 16.66%;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.75em;
      cursor: pointer;
    }
    .bank-hint {
      opacity: 0.7;
    }
    .bank-sheet-actions {
      display: flex;
      gap: 8px;
      margin-top: 16px;
    }

    /* Submenus inside a parameter section. The themes draw every section as a panel, some with
       !important, so the nested ones are reset here to sit inside their section as plain
       headings with an indent rule rather than as panels of their own. */
    /* "details details" outranks the themes' "#parameters details", which loads after this */
    #parameters details details.submenu {
      background: none !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 6px 0 0 !important;
    }
    #parameters details details.submenu::before {
      content: none !important;
      display: none !important;
    }
    #parameters details details.submenu > summary {
      width: fit-content;
      cursor: pointer;
      font-size: 1.25em !important;
      font-weight: bold;
      padding: 4px 0;
    }
    #parameters details details.submenu > .submenu-body {
      margin-left: 6px;
      padding: 0 0 6px 12px;
      border-left: 2px solid var(--track-color);
    }
    /* the first heading in a submenu sits right under its name */
    #parameters .submenu-body > h3:first-child {
      margin-top: 10px !important;
    }
    /* arcade's section names are small pixel type, so its submenus are smaller still */
    [data-theme="arcade"] #parameters details details.submenu > summary {
      font-size: .65rem !important;
    }
    /* chiptune's section names are set small, so its submenus follow */
    [data-theme="chiptune"] #parameters details details.submenu > summary {
      font-size: 1em !important;
    }
    /* in light and dark the headings inside a submenu sit below its name, not above it */
    html:not([data-themed]):not([data-theme="arcade"]) #parameters .submenu-body > h3 {
      font-size: 1.1em !important;
    }

    /* who made it, under the parameters, as on the Minichord Lab pages */
    #page-footer {
      margin-top: 34px;
      padding-top: 14px;
      border-top: 2px solid var(--text-primary);
      font-size: .95rem;
      opacity: .8;
    }
    #page-footer p {
      margin: .2rem 0;
      max-width: 80ch;
      line-height: 1.4;
      color: var(--text-primary);
    }

    /* the open list of a dropdown: the page's own colours, so the bank-coloured dropdowns' text
       (white or black, for the bank colour) is never left on the browser's default list */
    html:not([data-themed]):not([data-theme="arcade"]) select option,
    html:not([data-themed]):not([data-theme="arcade"]) select optgroup {
      background-color: var(--background-color);
      color: var(--text-primary);
    }