.dtcontainer {max-width: 700px;margin: 0 auto;background: #f5f5f5;border-radius: 10px;padding: 10px;}.menu-wrapper {margin-bottom: 20px;margin-top: 20px;border-radius: 10px;overflow: hidden;box-shadow: 0 2px 4px rgba(0,0,0,0.1);background: white;}.menu-toggle {border-bottom: 1px solid #eee;border-radius: 0;background: transparent;padding: 16px;}.control-panel {padding: 16px;margin: 0;background: white;transition: max-height 0.3s ease, opacity 0.3s ease;}.control-panel.collapsed {max-height: 0;opacity: 0;padding-top: 0;padding-bottom: 0;pointer-events: none;overflow: hidden;}.metronome-controls {display: flex;gap: 10px;flex-wrap: wrap;margin-bottom: 15px;}.pattern-container {display: flex;flex-wrap: wrap;gap: 8px;justify-content: center;margin: 20px 0;background: white;padding: 15px;border-radius: 10px;}.symbol-box {width: 27px;height: 27px;border: 2px solid #ddd;border-radius: 8px;display: inline-flex;align-items: center;justify-content: center;font-size: 16px;font-weight: bold;position: relative;transition: background-color 0.15s;}.symbol-box::before {content: "";}.symbol-box:nth-child(1)::before {opacity: 1;}.tap-area {height: 300px;background: white;border-radius: 15px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);display: flex;position: relative;overflow: hidden;margin-bottom: 20px;}.left-tap, .right-tap {flex: 1;position: relative;cursor: pointer;transition: background-color 0s;display: flex;align-items: center;justify-content: center;height: 100%;}.left-tap:active, .right-tap:active {background-color: rgba(0,0,0,0.05);}.left-tap::after {content: "";position: absolute;right: 0;top: 50%;transform: translateY(-50%);width: 2px;height: 100%;background-color: #ddd;}.tap-instruction {font-size: 24px;font-weight: bold;text-align: center;color: #d5d5d5;user-select: none;pointer-events: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.stats-container {background: white;padding: 15px;border-radius: 10px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);margin-bottom: 20px;font-size: 13px;color: #333;}.stats-container h3 {margin-top: 0;font-size: 16px;font-weight: bold;color: #222;border-bottom: 2px solid #ddd;padding-bottom: 5px;margin-bottom: 10px;}.stats-container div {margin-bottom: 2px;}button, select, input {padding: 8px 12px;border: 1px solid #ddd;border-radius: 6px;background: white;font-size: 14px;}button:active {background-color: #f0f0f0;}input[type="number"] {width: 80px;}.rudiment-select select, .note-select select {width: 100%;margin-top: 10px;}.note-select {margin-top: 10px;}.metronome-controls {flex-direction: column;}.symbol-box {width: 40px;height: 40px;font-size: 16px;}.tap-area {height: 200px;}.timing-bar-wrapper {position: absolute;top: 0;left: 0;width: 100%;height: 16px;border-top-left-radius: 16px;border-top-right-radius: 16px;background-color: #e9e9ec;overflow: hidden;display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #d1d1d6;z-index: 1;}.timing-bar {position: relative;width: 100%;height: 100%;display: flex;overflow: hidden;}.zone {flex-shrink: 0;height: 100%;pointer-events: none;}.zone-red-left {left: 0%;width: 30%;background-color: rgba(255, 59, 48, 0.15);}.zone-yellow-left {left: 30%;width: 15%;background-color: rgba(255, 204, 0, 0.2);}.zone-green {left: 45%;width: 10%;background-color: rgba(52, 199, 89, 0.25);}.zone-yellow-right {left: 55%;width: 15%;background-color: rgba(255, 204, 0, 0.2);}.zone-red-right {left: 70%;width: 30%;background-color: rgba(255, 59, 48, 0.15);}#timingMarker {position: absolute;top: -4px;width: 6px;height: 16px;background-color: black;border-radius: 3px;left: 50%;transform: translateX(-50%);transition: left 0.1s ease-out;z-index: 10;pointer-events: none;}.rudiment-select {margin-top: 20px;padding: 16px;border: 1px solid #ccc;border-radius: 10px;background-color: #f9f9f9;box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);}.rudiment-select label {font-weight: 500;display: block;margin-bottom: 8px;}.rudiment-select select {width: 100%;padding: 8px;font-size: 14px;border: 1px solid #ccc;border-radius: 6px;background-color: #fff;box-sizing: border-box;}.menu-toggle {background-color: #ffffff;padding: 12px 16px;font-weight: 600;font-size: 16px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);display: flex;justify-content: space-between;align-items: center;cursor: pointer;user-select: none;transition: background-color 0.2s;}.menu-toggle:hover {background-color: #f0f0f0;}#menuIcon {font-size: 18px;transition: transform 0.3s ease;}.control-panel {transition: max-height 0.3s ease, opacity 0.3s ease;overflow: hidden;}.control-panel.collapsed {max-height: 0;opacity: 0;padding: 0;margin-bottom: 0;pointer-events: none;}.control-panel:not(.collapsed) {max-height: 1000px;opacity: 1;pointer-events: auto;}.menu-row {border-bottom: 1px solid #eee;padding: 10px 0px 10px 0px;}.menu-row label, .menu-row span {white-space: nowrap;font-size: 14px;font-weight: 500;}.menu-row input[type="number"] {padding: 6px 10px;height: 30px;border-radius: 6px;border: 1px solid #ccc;background-color: #fff;box-sizing: border-box;}.menu-row button {cursor: pointer;}.note-timing {display: flex;align-items: center;flex-wrap: wrap;gap: 6px;font-size: 14px;}.toggle-label {position: relative;display: inline-block;width: 40px;height: 22px;margin-right: 6px;}.toggle-label input {opacity: 0;width: 0;height: 0;}.slider {position: absolute;cursor: pointer;background-color: #ccc;border-radius: 34px;top: 0;left: 0;right: 0;bottom: 0;transition: 0.4s;}.slider::before {position: absolute;content: "";height: 16px;width: 16px;left: 3px;bottom: 3px;background-color: white;border-radius: 50%;transition: 0.4s;}.toggle-label input:checked + .slider {background-color: #4caf50;}.toggle-label input:checked + .slider::before {transform: translateX(18px);}.toggle-text {font-size: 14px;font-weight: 500;}#customRudimentForm {margin-top: 12px;padding-top: 12px;border-top: 1px solid #eee;display: flex;flex-wrap: wrap;gap: 10px;align-items: flex-end;}#customRudimentForm.hidden {display: none;}#customRudimentForm label {font-weight: 500;font-size: 14px;margin-right: 6px;}#customRudimentForm input[type="text"] {padding: 6px 10px;font-size: 13px;border: 1px solid #ccc;border-radius: 6px;height: 30px;box-sizing: border-box;}#submitRudiment {padding: 6px 12px;font-size: 13px;background-color: #4caf50;color: white;border: none;border-radius: 6px;cursor: pointer;transition: background-color 0.2s;}#submitRudiment:hover {background-color: #43a047;}.rudiment-delete-list {margin-top: 8px;display: flex;flex-direction: column;gap: 4px;}.rudiment-delete-item {display: flex;justify-content: space-between;align-items: center;padding: 6px 10px;border: 1px solid #ccc;border-radius: 4px;background: #fff;}.rudiment-delete-item span {flex-grow: 1;}.rudiment-delete-item .delete {color: grey;font-weight: bold;margin-left: 10px;cursor: pointer;}.rudiment-select-controls {display: flex;gap: 8px;align-items: center;}.rudiment-select-controls select {flex: 1;height: 38px;font-size: 14px;padding: 0 12px;border: 1px solid #ccc;border-radius: 6px;background-color: #fff;box-sizing: border-box;}.rudiment-select-controls button {height: 38px;width: 38px;padding: 0;font-size: 18px;border: 1px solid #ccc;border-radius: 6px;background: white;cursor: pointer;display: flex;align-items: center;justify-content: center;transform: translateY(5px);}.stats-actions {display: flex;gap: 10px;margin-top: 10px;}.about-overlay {position: fixed;top: 0;right: 0;width: 100%;max-width: 600px;height: 100%;background: white;box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);z-index: 9999;transform: translateX(100%);transition: transform 0.3s ease;display: flex;flex-direction: column;}.about-overlay:not(.hidden) {transform: translateX(0%);}.about-overlay.hidden {transform: translateX(100%);}.about-header {position: sticky;top: 0;background: white;padding: 16px;border-bottom: 1px solid #ddd;display: flex;justify-content: space-between;align-items: center;font-weight: bold;font-size: 16px;z-index: 10;}.close-button {background: none;border: none;font-size: 24px;cursor: pointer;line-height: 1;padding: 0;margin: 0;color: #999;}.close-button:hover {color: #333;}.about-content {padding: 20px;font-size: 14px;overflow-y: auto;flex: 1;}button {padding: 8px 14px;font-size: 14px;font-weight: 500;color: #333;background-color: #f1f1f1;border: 1px solid #ccc;border-radius: 6px;cursor: pointer;transition: background-color 0.2s, box-shadow 0.2s;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);}button:hover {background-color: #e4e4e4;}button:active {background-color: #ddd;box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);}button:disabled {background-color: #f5f5f5;color: #aaa;cursor: not-allowed;box-shadow: none;}.left-tap.flash, .right-tap.flash {background-color: rgba(0, 0, 0, 0.05);}