<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* --- åŸºæœ¬é‡è¨­èˆ‡å…¨åŸŸè¨­å®š --- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body { display: flex; justify-content: center; align-items: center; background-color: #1a1a1a; color: #e0e0e0; }

/* --- App ä¸»è¦å®¹å™¨ --- */
#app { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 10px; max-width: 500px; margin: 0 auto; gap: 10px; }

/* --- è¦–è¦ºåŒ–å€åŸŸ --- */
#visualizer { flex-shrink: 0; width: 100%; display: flex; justify-content: space-around; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #444; }
.indicator-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.indicator { width: 45px; height: 45px; background-color: #444; border-radius: 50%; transition: background-color 0.05s ease-out, transform 0.05s ease-out; display: flex; justify-content: center; align-items: center; }
.indicator.active { background-color: #00bcd4; transform: scale(1.1); box-shadow: 0 0 12px #00bcd4; }
.label { font-size: 0.85em; color: #aaa; }

/* --- æŽ§åˆ¶é&nbsp;…å€åŸŸ --- */
#controls { width: 100%; display: flex; flex-direction: column; gap: 12px; overflow: hidden; flex-grow: 1; }
.control-section { display: flex; flex-direction: column; gap: 6px; }
.control-section label { font-size: 0.88em; color: #ccc; margin-bottom: 2px; font-weight: 500; }
.bpm-control { align-items: center; }
.bpm-control label { margin-bottom: 8px; }
#bpm-display { font-weight: bold; color: #00bcd4; font-size: 1.1em; margin-left: 5px; }

/* æŒ‰éˆ•çµ„æ¨£å¼ */
.button-group { display: flex; flex-wrap: wrap; gap: 6px; }

/* é¸é&nbsp;…æŒ‰éˆ•æ¨£å¼ */
.control-option-button { padding: 7px 10px; font-size: 0.82em; cursor: pointer; background-color: #333; color: #ccc; border: 1px solid #555; border-radius: 5px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; touch-action: manipulation; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; flex-grow: 1; text-align: center; min-width: 55px; }
.control-option-button:hover { background-color: #444; border-color: #777; }
.control-option-button.active { background-color: #007bff; color: white; border-color: #0056b3; font-weight: 500; }
.control-option-button.mute-button.active { background-color: #555; border-color: #777; color: #aaa; }

/* æ»‘æ¡¿ (Range Input) æ¨£å¼ */
input[type="range"] { width: 100%; height: 8px; cursor: pointer; appearance: none; -webkit-appearance: none; background: #555; border-radius: 5px; outline: none; transition: background 0.2s ease; }
input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; background: #00bcd4; border-radius: 50%; cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: #00bcd4; border-radius: 50%; cursor: pointer; border: none; }
input[type="range"]:active::-webkit-slider-thumb { background: #0097a7; }
input[type="range"]:active::-moz-range-thumb { background: #0097a7; }

/* å‹•æ…‹æ¨™ç±¤åƒè€ƒ */
.poly-label-ref { font-weight: bold; color: #00bcd4; }

/* --- Footer Action Area --- */
.footer-action { width: 100%; padding: 10px 0 5px 0; flex-shrink: 0; }

/* Main Action Button (Start/Stop) */
.footer-action .control-button.main-action { padding: 14px 20px; font-size: 1.2em; font-weight: bold; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 8px; transition: background-color 0.2s ease, transform 0.1s ease; touch-action: manipulation; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; width: 100%; }
.footer-action .control-button.main-action:active { background-color: #0056b3; transform: scale(0.98); }
/* Stop state color set by JS */</pre></body></html>