@charset "utf-8";
/* CSS Document */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: #000;
            overflow: hidden;
            font-family: 'Courier New', monospace;
            color: #fff;
        }
        
        canvas {
            display: block;
            background: radial-gradient(circle at center, #0a0a0a, #000);
        }
        
        .control-matrix {
            position: absolute;
            top: 15px;
            left: 15px;
            background: rgba(0,0,0,0.95);
            padding: 20px;
            border: 2px solid #ff0000;
            z-index: 100;
            font-weight: bold;
            font-size: 12px; display: none;
        }
        
        .control-section {
            margin-bottom: 12px;
            border-bottom: 1px solid #333;
            padding-bottom: 8px;
        }
        
        .control-row {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px; 
        }
        
        #controls {width: 100%; position: fixed; bottom: 40px; left: 0;justify-content: center;}
        
        button {
            background: #000;
            color: #ff0000;
            border: 0px solid #ff0000;
            padding: 0;
            cursor: pointer;
            font-family: inherit;
            font-size: 11px;
            font-weight: bold;
            transition: all 0.2s; width: 80px; height: 80px; background-image: url("../img/play.svg"); background-repeat: no-repeat; background-position: center; background-size: 60px; text-indent: -9999px; border-radius: 50%;
        }
        
        button:hover, button.active {
            
        }
        #stopBtn {background-image: url("../img/pause.svg");}
        
        .micro-slider {
            width: 80px;
            height: 3px;
            background: #333;
            appearance: none;
            outline: none;
        }
        
        .micro-slider::-webkit-slider-thumb {
            appearance: none;
            width: 12px;
            height: 12px;
            background: #ff0000;
            cursor: pointer;
        }
        
        .theory-panel {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0,0,0,0.95);
            padding: 18px;
            border: 2px solid #fff;
            max-width: 320px;
            z-index: 100;
            font-size: 11px; display: none;
        }
        
        .tone-row {
            font-family: monospace;
            font-size: 10px;
            background: rgba(255,0,0,0.1);
            padding: 6px;
            margin: 4px 0;
            border-left: 3px solid #ff0000;
            letter-spacing: 1px;
        }
        
        .harmonic-series {
            font-family: monospace;
            font-size: 10px;
            background: rgba(255,255,255,0.1);
            padding: 6px;
            margin: 4px 0;
            border-left: 3px solid #fff;
        }
        
        .rhythm-matrix {
            font-family: monospace;
            font-size: 9px;
            background: rgba(0,0,0,0.3);
            padding: 8px;
            margin: 6px 0;
            border: 1px solid #666;
            line-height: 1.2;
        }
        
        .voice-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 6px;
            border: 1px solid #fff;
        }
        
        .voice-1 { background: #ff0000; }
        .voice-2 { background: #ffffff; }
        .voice-3 { background: #888888; }
        .voice-4 { background: #440000; }
        
        .mathematical-display {
            position: absolute;
            bottom: 15px;
            left: 15px;
            right: 15px;
            background: rgba(0,0,0,0.98);
            padding: 18px;
            border: 2px solid #ff0000;
            font-size: 11px;
            line-height: 1.4;
            z-index: 100; display: none;
        }
        
        .formula {
            font-family: 'Times New Roman', serif;
            font-size: 13px;
            color: #ff4444;
            margin: 6px 0;
        }
        
        .interval-matrix {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 4px;
            margin: 8px 0;
        }
        
        .interval-cell {
            background: rgba(255,255,255,0.1);
            border: 1px solid #666;
            padding: 4px;
            text-align: center;
            font-size: 9px;
        }
        
        .golden-ratio {
            color: #ffd700;
            font-weight: bold;
        }

        #resetBtn { display: none!important;}