/* Diagram */g.note.transparent:hover { opacity: 1;}g.note { fill: white; stroke-width: 1px; stroke: black;}g.note.selected>circle { opacity: 1; stroke-dasharray: 4, 4; stroke-width: 3px; stroke: black;}g.note.hidden { opacity: 0;}g.note.transparent { opacity: 0.3;}g.note.visible { opacity: 1; fill: white;}g.note.blue { fill: steelblue;}g.note.blue>text { stroke: white; fill: white;}g.note.black { fill: black;}g.note.black>text { stroke: white; fill: white;}g.note.red { fill: indianred;}g.note.red>text { stroke: white; fill: white;}g.note.green { fill: teal;}g.note.green>text { stroke: white; fill: white;}path.string { stroke: black; fill: none;}path.frets { stroke: black; stroke-width: 1px; fill: none;}g.note>text { stroke: black; stroke-width: 0px; fill: black; text-anchor: middle; dominant-baseline: middle; font-size: 18px;}#editable-div { text-align: center; font-size: 18px;}#fretboard-diagram-creator { padding-top: 10px; /* border: 1px solid; */}div.menu { text-align: center; /* text-align: center; */}text.marker { text-anchor: middle; font-size: 16px; fill: black;}/* Controls *//* Actions on nodes */#color-selector { /* background-color: lightgray; */ margin: auto; padding-bottom: 10px; width: 280px; display: flex; justify-content: space-between;}button.color { width: 44px;}button { height: 25px;}button.color:hover { transform: scale(1.1);}.color.blue { background-color: steelblue;}.color.black { background-color: black;}.color.green { background-color: teal;}.color.red { background-color: indianred;}.color.white { background-color: white;}/* Global actions */#global-actions { margin: auto; width: 280px; display: flex; justify-content: space-between;}@supports (width: 100vw) { figure.half-full { max-width: 100vw; width: 1200px; position: relative; left: 50%; right: 50%; margin-left: -600px; margin-right: -600px; } @media only screen and (max-width: 1200px) { figure.half-full { max-width: 100vw; width: 1000px; position: relative; left: 50%; right: 50%; margin-left: -500px; margin-right: -500px; overflow-y: auto; } } @media only screen and (max-width: 1000px) { figure.half-full { max-width: 100vw; width: 100%; left: 0; right: 0; margin: 0; overflow-y: auto; } }}.num-input { font-variant-numeric: tabular-nums; font-feature-settings: "tnum";}.error { font-size: 18px; text-anchor: middle;}.timer-controls { background-color: #f5f5f5; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 10px;}.timer-controls input[type="number"] { width: 80px; padding: 5px; border: 1px solid #ddd; border-radius: 4px;}.timer-controls button { padding: 8px 15px; border: none; border-radius: 4px; background-color: #3498db; color: white; cursor: pointer; transition: background-color 0.3s;}.timer-controls button:hover { background-color: #2980b9;}.timer-controls button:disabled { background-color: #bdc3c7; cursor: not-allowed;}.note-display { text-align: center; margin: 20px 0; padding: 15px; background-color: #f5f5f5; border-radius: 8px; display: flex; justify-content: center; gap: 20px; font-size: 24px; font-weight: bold;}.random-note, .string-number { padding: 10px 20px; background-color: white; border-radius: 4px; min-width: 100px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column;}.container { max-width: 1200px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.page-title { text-align: center; color: #333; font-size: 2.5rem; font-weight: bold; margin-bottom: 30px; text-transform: lowercase; letter-spacing: 2px;}.controls { margin-bottom: 20px;}.timer-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}.string-selection { margin-top: 15px; padding: 10px; background-color: #f5f5f5; border-radius: 8px;}.string-checkboxes { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 8px;}.string-checkboxes label { display: flex; align-items: center; gap: 5px; cursor: pointer;}.string-checkboxes input[type="checkbox"] { width: auto; margin: 0;}input[type="number"] { width: 80px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;}button { padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s;}button:hover { background-color: #45a049;}button:disabled { background-color: #cccccc; cursor: not-allowed;}.display { text-align: center; margin: 20px 0; font-size: clamp(18px, 4vw, 24px); font-weight: bold;}#randomNote { font-size: clamp(36px, 8vw, 48px); margin-bottom: 10px;}#stringNumber { color: #666;}.fretboard-matrix { margin-top: 30px; overflow-x: auto; -webkit-overflow-scrolling: touch;}table { width: 100%; border-collapse: collapse; margin: 20px 0; table-layout: fixed;}th, td { border: 1px solid #ddd; padding: 8px; text-align: center; height: 40px; white-space: nowrap; overflow: hidden;}/* String numbers column */th:first-child, td:first-child { width: 80px; background-color: #f0f0f0; font-weight: bold;}/* Fret columns with proportional widths */th:nth-child(2), td:nth-child(2) { width: 14%; } /* Fret 1 */th:nth-child(3), td:nth-child(3) { width: 13.5%; } /* Fret 2 */th:nth-child(4), td:nth-child(4) { width: 13%; } /* Fret 3 */th:nth-child(5), td:nth-child(5) { width: 12.5%; } /* Fret 4 */th:nth-child(6), td:nth-child(6) { width: 12%; } /* Fret 5 */th:nth-child(7), td:nth-child(7) { width: 11.5%; } /* Fret 6 */th:nth-child(8), td:nth-child(8) { width: 11%; } /* Fret 7 */th:nth-child(9), td:nth-child(9) { width: 10.5%; } /* Fret 8 */th:nth-child(10), td:nth-child(10) { width: 10%; } /* Fret 9 */th:nth-child(11), td:nth-child(11) { width: 9.5%; } /* Fret 10 */th:nth-child(12), td:nth-child(12) { width: 9%; } /* Fret 11 */th:nth-child(13), td:nth-child(13) { width: 8.5%; } /* Fret 12 *//* Fret markers */th { position: relative;}th[data-fret="3"]::after,th[data-fret="5"]::after,th[data-fret="7"]::after,th[data-fret="9"]::after { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background-color: #ff0000; border-radius: 50%;}th[data-fret="12"]::after { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 24px; height: 8px; background: none;}th[data-fret="12"]::before,th[data-fret="12"]::after { content: ''; position: absolute; top: 5px; width: 8px; height: 8px; background-color: #ff0000; border-radius: 50%;}th[data-fret="12"]::before { left: calc(50% - 16px);}th[data-fret="12"]::after { left: calc(50% + 8px);}td:first-child { font-weight: bold; background-color: #f5f5f5; text-align: left; position: sticky; left: 0; z-index: 1;}.note { cursor: pointer; transition: background-color 0.2s;}.note:hover { background-color: #e9e9e9;}.note.selected { background-color: #4CAF50; color: white;}/* Responsive adjustments */@media screen and (max-width: 768px) { body { padding: 10px; } .container { padding: 15px; } .timer-controls { justify-content: center; } .fretboard-matrix { margin-top: 20px; }}@media screen and (max-width: 480px) { body { padding: 5px; } .container { padding: 10px; } .timer-controls { flex-direction: column; align-items: stretch; } input[type="number"] { width: 100%; } button { width: 100%; }}.footer { margin-top: auto; padding: 20px; border-top: 1px solid #e9ecef; text-align: center;}.footer-content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px;}.footer-text { color: #6c757d; font-size: 1rem; margin: 0; font-style: italic;}.coffee-link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background-color: #ff6b6b; color: white; text-decoration: none; border-radius: 25px; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);}.coffee-link:hover { background-color: #ff5252; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4); color: white; text-decoration: none;}.coffee-link:active { transform: translateY(0);}.ethereum-section { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 16px; background-color: #f8f9fa; border-radius: 20px; border: 1px solid #e9ecef;}.ethereum-logo { font-size: 1.2rem; color: #627eea; font-weight: bold;}.ethereum-address { font-family: 'Courier New', monospace; font-size: 0.9rem; color: #495057; font-weight: 500; letter-spacing: 0.5px; cursor: pointer; transition: color 0.3s ease;}.ethereum-address:hover { color: #627eea;}@media screen and (max-width: 768px) { .footer { margin-top: 30px; padding: 15px; } .footer-content { gap: 8px; } .footer-text { font-size: 0.9rem; } .coffee-link { padding: 10px 20px; font-size: 0.9rem; }}