:root {
   --color-bg: #ffffff;
   --rt-navy: #111111;
   --rt-gold: #ffc600;
   --color-text: #333;
   --color-text-muted: #888;
   --color-text-subtle: #555;
   --color-hole-bar: #666;
   --color-bend-from: #f2f2f2;
   --color-bend-to: #e0e0e0;
   --color-bend-border: #ccc;
   --color-piano-white-border: #999;
   --color-piano-black: #222;
   /* --color-active: #ffe033; */
   --color-active: #ffc600;
   /* --color-active-border: #e6c800; */
   --color-active-border: blue;
   /*--color-active-glow: rgba(255, 224, 51, 0.6);*/
   --color-active-glow: rgba(255, 224, 51, 0.6);
   /* --color-scale-bg: #fff3b0; */
   --color-scale-bg: #ffc600;
   /* --color-scale-border: #e6d280; */
   --color-scale-border: transparent;
   --color-deviation-off: #ff6b6b;
   --color-pitch-info-bg: rgba(0, 0, 0, 0.05);
   --color-deviation-bar: rgba(0, 0, 0, 0.1);
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 .trainer {
   font-family: Lato, Verdana, Geneva, Tahoma, sans-serif;
   background: var(--color-bg);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 20px;
   min-width: 730px;
   color: var(--color-text);
 }

 .trainer-container {
   max-width: 1200px;
   width: 100%;
 }

 h1 {
   text-align: center;
   margin-bottom: 0;
   font-size: 25px;
 }

 .controls {
   text-align: center;
   margin-bottom: 30px;
 }

 #startBtn {
   width: 100%;
   height: 70%;
   padding: auto;
   /*: 15px 30px;*/
   font-size: 18px;
   background: var(--color-text-subtle);
   color: var(--color-bg);
   border: none;
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.3s;
 }

 #startBtn:hover {
   background: var(--color-text);
 }

 #startBtn:disabled {
   background: var(--color-bend-border);
   cursor: not-allowed;
 }

 .pitch-info {
   text-align: center;
   margin-bottom: 30px;
   background: var(--color-pitch-info-bg);
   padding: 20px;
   border-radius: 10px;
 }

 .detected-note {
   font-size: 48px;
   font-weight: bold;
   margin-bottom: 10px;
 }

 .frequency {
   font-size: 24px;
   color: var(--color-text-muted);
 }

 .pitch-deviation {
   margin-top: 15px;
 }

 .deviation-bar {
   width: 100%;
   height: 30px;
   background: var(--color-deviation-bar);
   border-radius: 15px;
   position: relative;
   overflow: hidden;
 }

 .deviation-indicator {
   position: absolute;
   width: 4px;
   height: 100%;
   background: var(--color-deviation-off);
   left: 50%;
   transform: translateX(-50%);
   transition: left 0.1s;
 }

 .deviation-center {
   position: absolute;
   width: 2px;
   height: 100%;
   background: var(--color-text);
   left: 50%;
   transform: translateX(-50%);
 }

 .deviation-text {
   margin-top: 5px;
   font-size: 18px;
 }

 .harmonica {
   background: var(--color-bg);
   border-radius: 4px;
   padding: 20px 10px;
   padding-top: 0;
   display: inline-block;
 }

 .harp-controls {
   position: absolute;
   right: 0;
   bottom: 14px;
   display: flex;
   row-gap: 18px;
   align-items: start;
   justify-content: start;
   flex-direction: column;
   z-index: 1;
 }

 .holes-container {
   display: flex;
   gap: 0px;
   justify-content: center;
   position: relative;
 }

 .holes-container::before {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 158px;
   height: 28px;
   background: var(--color-hole-bar);
   z-index: 0;
 }

 .holes-container::after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 110px;
   height: 123px;
   border: 1px solid var(--color-text);
   border-radius: 6px;
   pointer-events: none;
   z-index: 5;
 }

 .hole {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0px;
   position: relative;
   z-index: 1;
   padding: 0;
 }

 .hole::after {
   content: '';
   position: absolute;
   right: 0;
   top: 111px;
   height: 123px;
   width: 1px;
   background: var(--color-text);
   z-index: 3;
 }

 .hole:last-child::after {
   display: none;
 }

 .note-group {
   display: flex;
   flex-direction: column;
   gap: 2px;
   align-items: center;
 }

 .note-group-blow {
   margin-bottom: 0;
 }

 .note-group-blow .note.main {
   margin-top: 2px;
 }

 .note-group-draw .note.main {
   margin-bottom: 2px;
 }

 .note {
   width: 62px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   /* background: var(--color-bg); */
   border: none;
   border-radius: 0;
   font-weight: normal;
   font-size: 14px;
   color: var(--color-text);
   transition: all 0.15s;
   position: relative;
   white-space: pre-line;
   text-align: center;
   line-height: 1.15;
 }

 .note.main {
   width: 62px;
   height: 48px;
   font-size: 17px;
 }

 .note.bend {
   width: 54px;
   height: 48px;
   font-size: 14px;
   background: linear-gradient(145deg, var(--color-bend-from), var(--color-bend-to));
   border: 1px solid var(--color-bend-border);
   border-radius: 3px;
   margin: 2px 0;
 }

 .note-spacer {
   width: 54px;
   height: 48px;
   visibility: hidden;
   margin: 2px 0;
 }

 .note .deviation-display {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 40px;
   height: 3px;
   background: var(--color-bg);
   border-radius: 2px;
   display: none;
   transition: top 0.1s;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
 }

 .note.active .deviation-display {
   display: block;
 }

 .note .deviation-indicator {
   display: none;
 }

 .note.active {
   background: var(--color-active);
   color: var(--color-text);
   transform: scale(1.15);
   box-shadow: 0 0 15px var(--color-active-glow);
   border-color: var(--color-active-border);
   border-radius: 5px;
   z-index: 9999999999;
 }

 .note.blow.active,
 .note.draw.active {
   background: var(--color-active);
 }

 .note.kbd-active {
   background: var(--color-active) !important;
   color: var(--color-text) !important;
   transform: scale(1.15) !important;
   box-shadow: 0 0 15px var(--color-active-glow) !important;
   border-color: var(--color-active-border) !important;
   border-radius: 5px !important;
   z-index: 9999999999 !important;
 }

 .note[data-key-hint]::after {
   content: none;
 }

 .piano-key[data-key-hint]::after {
   content: none;
 }

 /* Scale note highlighting */
 .note.scale-root {
   font-weight: bold !important;
 }

 .hole-number {
   font-size: 10px;
   font-weight: normal;
   color: white;
   background: transparent;
   padding: 0;
   width: 62px;
   height: 28px;
   line-height: 28px;
   text-align: center;
   border-radius: 0;
   margin: 0;
   position: relative;
   z-index: 1;
 }

 .label {
   font-size: 11px;
   color: var(--color-text-subtle);
 }

 .status {
   text-align: center;
   margin-top: 10px;
   font-size: 14px;
   color: var(--color-text-muted);
 }

 .header {
   display: grid;
   grid-template-columns: 120px 1fr 120px;
   align-items: center;
   justify-content: center;
   ;
   gap: 40px;
   width: fit-content;
   margin: 0 auto;
 }

 .header>div {
   margin: 0 20px;
 }


 .header svg {
   width: 120px;
   color: var(--color-text);
   fill: var(--color-text);
 }

 /* Piano keyboard */
 .piano-wrapper {
   display: flex;
   justify-content: center;
   margin-top: 40px;
   overflow-x: auto;
   padding-bottom: 24px;
 }

 .piano-wrapper>* {
   overflow: visible;
 }

 .piano-keyboard {
   position: relative;
   height: 120px;
   flex-shrink: 0;
 }

 .piano-key {
   position: absolute;
   top: 0;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   padding-bottom: 5px;
   box-sizing: border-box;
   cursor: pointer;
   user-select: none;
 }

 .piano-key.white {
   width: 29px;
   height: 120px;
   background: var(--color-bg);
   border: 1px solid var(--color-piano-white-border);
   border-radius: 0 0 3px 3px;
   z-index: 1;
   font-size: 10px;
   color: var(--color-text);
 }

 .piano-key.black {
   width: 18px;
   height: 74px;
   background: var(--color-piano-black);
   border: 1px solid black;
   border-radius: 0 0 3px 3px;
   z-index: 2;
   font-size: 7px;
   color: var(--color-bg);
   white-space: pre-line;
   text-align: center;
   padding-bottom: 3px;
 }

 .piano-key span {
   border: 1px solid transparent;
   border-radius: 4px;
   padding: 1px 3px;
 }

 .piano-key.in-scale span {
   background: var(--color-scale-bg);
   border-color: var(--color-scale-border);
 }

 .piano-key.black.in-scale span {
   color: var(--color-text);
 }

 .piano-key.scale-root span {
   font-weight: bold;
 }


 .piano-key.active,
 .piano-key.kbd-active {
   background: var(--color-active) !important;
   border-color: var(--color-active-border) !important;
 }

 /* Chord chart */
 .cc-headline {
   text-align: center;
   font-size: 18px;
   font-weight: 600;
   margin: 0 0 10px 0;
   color: #333;
 }

 .cc-grid {
   display: grid;
   grid-template-columns: 28px repeat(7, 1fr);
   max-width: 680px;
   margin: 0 auto;
   border-top: 1.5px solid #bbb;
   border-bottom: 1.5px solid #bbb;
   font-family: sans-serif;
 }

 .cc-cell {
   font-size: 22px;
   font-weight: bold;
   text-align: center;
   padding: 10px 2px;
   border-left: 1px solid #d0d0d0;
 }

 .cc-label {
   font-size: 13px;
   color: #aaa;
   text-align: right;
   padding: 10px 5px 10px 0;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }

 .cc-root {
   background: #efefef;
 }

 .cc-sub {
   font-size: 13px;
   text-align: center;
   padding: 5px 2px;
   border-left: 1px solid #d0d0d0;
   color: #888;
 }

 .cc-sub:first-child {
   border-left: none;
 }

 .cc-deg {
   color: #aaa;
 }

 .cc-chord {
   color: #333;
   font-size: 14px;
   font-weight: 500;
 }

 .cc-roman {
   font-style: italic;
   color: #555;
 }

 .cc-cell {
   padding: 6px 2px 4px;
 }

 .cc-holes {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 2px;
   margin-top: 3px;
 }

 .cc-hole-blow,
 .cc-hole-draw {
   display: inline-block;
   font-size: 9px;
   font-weight: 600;
   padding: 1px 3px;
   border-radius: 6px;
   line-height: 1.4;
   white-space: nowrap;
   font-family: monospace;
 }

 /*
 .cc-hole-blow {
   background: rgba(120, 180, 255, 0.25);
   border: 1px solid rgba(80, 140, 220, 0.5);
   color: #2244aa;
 }

 .cc-hole-draw {
   background: rgba(255, 150, 100, 0.2);
   border: 1px solid rgba(220, 100, 60, 0.5);
   color: #883311;
 }
*/

 .cc-tabs-hidden .cc-holes {
   display: none;
 }

 /* ── Rhythmus Trainer ─────────────────────────────────────── */

 #app {
   width: 100%;
   max-width: 760px;
   margin: 0 auto;
 }

 .hdr {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 16px;
   padding-bottom: 14px;
   border-bottom: 1px solid rgba(0, 0, 0, .1);
 }

 .hdr-l {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .mark {
   width: 28px;
   height: 28px;
   background: var(--rt-navy);
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 2.5px;
   padding: 5px 4px;
 }

 .mark span {
   display: block;
   height: 1.5px;
   background: var(--rt-gold);
   border-radius: 1px;
 }

 .mark span:nth-child(1) {
   width: 100%;
 }

 .mark span:nth-child(2) {
   width: 70%;
 }

 .mark span:nth-child(3) {
   width: 100%;
 }

 .mark span:nth-child(4) {
   width: 42%;
 }

 .t1 {
   font-size: 16px;
   font-weight: 600;
   color: var(--rt-navy);
 }

 .t2 {
   font-size: 10px;
   color: #bbb;
   margin-top: 2px;
   letter-spacing: .05em;
 }

 .ts-group {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
 }

 .tog-btn {
   padding: 4px 10px;
   font-size: 12px;
   font-weight: 600;
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: 5px;
   background: var(--color-bg);
   cursor: pointer;
   color: #666;
   transition: all .12s;
 }

 .tog-btn.on {
   background: #ffc600;
   color: #333;
   border-color: #e6b400;
 }

 .transport {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 14px;
   flex-wrap: wrap;
 }

 .play-btn {
   display: flex;
   align-items: center;
   gap: 5px;
   padding: 8px 20px;
   background: var(--color-bg);
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: 8px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 600;
   color: #111;
   transition: all .12s;
   white-space: nowrap;
   flex-shrink: 0;
 }

 .play-btn.on {
   background: #ffc600;
   color: #333;
   border-color: #e6b400;
 }

 .bpm-group {
   display: flex;
   align-items: center;
   gap: 8px;
   flex: 1;
   min-width: 130px;
 }

 .bpm-label {
   font-size: 12px;
   color: #666;
   white-space: nowrap;
 }

 .bpm-val {
   font-size: 14px;
   font-weight: 600;
   min-width: 52px;
   color: var(--rt-navy);
 }

 #app input[type=range] {
   -webkit-appearance: none;
   flex: 1;
   height: 3px;
   background: rgba(0, 0, 0, .15);
   border-radius: 2px;
   outline: none;
 }

 #app input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: var(--rt-navy);
   cursor: pointer;
 }

 .sm-btn {
   padding: 7px 13px;
   font-size: 12px;
   font-weight: 500;
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: 7px;
   background: var(--color-bg);
   cursor: pointer;
   color: #666;
   transition: all .1s;
   white-space: nowrap;
 }

 .swing-group {
   display: flex;
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: 7px;
   overflow: hidden;
   flex-shrink: 0;
 }

 .swing-btn {
   padding: 7px 13px;
   font-size: 12px;
   font-weight: 600;
   background: none;
   border: none;
   cursor: pointer;
   color: #666;
   transition: all .12s;
   white-space: nowrap;
 }

 .swing-btn.on {
   background: #ffc600;
   color: #333;
   border-color: #e6b400;
 }

 .twrap {
   overflow-x: auto;
 }

 .tframe {
   border: 2px solid var(--rt-navy);
   border-radius: 10px;
   overflow: hidden;
 }

 .gtable {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
 }

 .beat-num {
   text-align: center;
   font-size: 28px;
   font-weight: 300;
   padding: 10px 3px 12px;
   border-bottom: 2px solid var(--rt-navy);
   transition: color .07s;
   color: #111;
   border-right: 1.5px solid var(--rt-navy);
 }

 .beat-num:last-child {
   border-right: none;
 }

 .beat-num.ab {
   color: var(--rt-gold);
   font-weight: 500;
 }

 .lh {
   border-bottom: 2px solid var(--rt-navy);
   border-right: 2px solid var(--rt-navy);
   width: 110px;
   padding: 8px;
 }

 .row-td {
   padding: 6px 10px 6px 8px;
   vertical-align: middle;
   border-bottom: 1px solid rgba(26, 46, 59, .12);
   border-right: 2px solid var(--rt-navy);
 }

 .row-primary {
   font-size: 12px;
   font-weight: 600;
   color: var(--rt-navy);
 }

 .row-secondary {
   font-size: 9px;
   color: #bbb;
   margin-top: 2px;
   letter-spacing: .05em;
 }

 .bcell {
   padding: 4px;
   border-bottom: 1px solid rgba(26, 46, 59, .12);
   border-right: 1.5px solid var(--rt-navy);
   vertical-align: middle;
 }

 .bcell:last-child {
   border-right: none;
 }

 tbody tr:last-child .row-td,
 tbody tr:last-child .bcell {
   border-bottom: none;
 }

 .sub-cells {
   display: flex;
   gap: 3px;
 }

 .sc {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px;
   border: 1.5px solid rgba(0, 0, 0, .09);
   cursor: pointer;
   user-select: none;
   transition: background .07s, border-color .07s, color .07s, transform .06s;
   min-width: 0;
   overflow: hidden;
   font-weight: 400;
   background: var(--color-bg);
   color: #ccc;
 }

 .sc:hover {
   border-color: rgba(255, 198, 0, .6);
   color: #888;
 }

 .sc.active {
   background: var(--rt-navy);
   color: #fff;
   border-color: var(--rt-navy);
 }

 .sc.active.playing {
   background: var(--rt-gold);
   color: var(--rt-navy);
   border-color: var(--rt-gold);
   transform: scaleY(1.08);
 }

 .foot {
   margin-top: 14px;
   padding-top: 12px;
   border-top: 0.5px solid rgba(0, 0, 0, .08);
   display: flex;
   justify-content: space-between;
 }

 .foot span {
   font-size: 10px;
   color: #bbb;
 }