@charset "utf-8";
/* CSS Document */
body {
            font-family: 'Noto Sans JP', 'Noto Sans Japanese', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #FFF;
            margin: 0;
            padding: 0px;
        }

html[lang="en"] body {
            font-family: 'Google Sans', 'Noto Sans JP', 'Noto Sans Japanese', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .container {
            padding: 0px;
           margin: 60px auto 360px auto;
        }

        h1 {
            color: #333;
            text-align: center;
            font-size: 24px; line-height: 1; width: calc( 100% - 120px ); margin-left: auto; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: pre;
        }

        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
            font-style: italic;
        }

        #controls {
             position: fixed; bottom: 0; left: 0; width: 100%; padding: 20px 0 0 0; box-sizing: border-box; border-top:1px solid #ddd; background-color: #FFF;
             
        }
        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 0px;
            flex-wrap: wrap;
            justify-content: center;
        }

        button {
            padding: 0;
            font-size: 16px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold; background-position: center; background-repeat: no-repeat; background-size: 40px; width: 80px; height: 80px; background-color: transparent; text-indent: -9999px;
        }

        button:hover:not(:disabled) {
        }

        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        #startBtn {
            color: white; background-image: url("../img/rec.svg"); background-color: #303f9f;
        }

        #stopBtn {
            color: white; background-image: url("../img/pause.svg"); background-color: #303f9f;
        }

        #resumeBtn {
            color: white; background-image: url("../img/play.svg"); background-color: #303f9f;
        }

        #resetBtn {
            color: white; background-image: url("../img/close.svg"); width: 60px; height: 60px;background-size: 30px;
        }

        .status {
            background: #fff;
            padding: 0 20px 20px 20px;
            border-radius: 0px;
            margin-bottom: 0px;
            text-align: center; margin-top: 0px; box-sizing: border-box; max-width: 800px; margin: 0 auto 0px auto;
        }

        .status-text {
            font-size: 1em;
            color: #333;
            margin-bottom: 10px;
        }
        .status-text:empty { margin: 0;}

        .progress-bar {
            width: 100%;
            height: 10px;
            background: #e0e0e0;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            width: 0%;
            transition: width 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold; font-size: 10px; text-indent: -9999px;
        }

        .recordings {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 40px; max-width: 800px; margin: 0 auto 20px auto;
        }

        .recording-slot {
            background: #e0e0e0;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            gap: 10px; opacity: .5;;
        }

        .recording-slot.recorded {
            background: #FFF;
    border: 2px solid #ddd;
    box-shadow: 0 0 7px rgba(0, 0, 0, .1); opacity: 1;
        }

        .recording-slot.playing {
            border-color: #FFC107;
            animation: pulse 1s infinite;
        }

        .slot-label {
            font-size: 14px; color: #FFF;
        }
.recorded .slot-label {color: #000;
            font-weight: bold;
        }

        .waveform-canvas {
            width: 100%;
            height: 60px;
            background: #fff;
            border-radius: 5px;
            display: none;
        }

        .waveform-canvas.visible {
            display: block;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .convergence-meter {
            margin-top: 0px;
            padding: 0px;
            background: #f5f5f5;
            border-radius: 10px;
        }

        .flow {
            margin: 0px 0 0px 0;
            padding: 10px 15px;
            background: #fff; font-size: 10px; position: relative;border-bottom: 0px solid #ddd;
        }

        .flow-title {
            font-weight: bold;
            color: #1a237e;
            margin-bottom: 8px;
            font-size: 13px;
        }

        .flow-steps {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .flow-step {
            padding: 6px 12px;
            border-radius: 0px;
            color: #e0e0e0;
            border-bottom: 4px solid #e0e0e0;
            transition: all 0.2s; width: calc( 100% / 3 - 8px ); box-sizing: border-box; text-align: center;
        }

        .flow-step.flow-active {
            border-color: #303f9f;
            color: #303f9f;
        }

        .flow-step.flow-done {
            border-color: #303f9f;
            color: #303f9f;
        }

        .flow-arrow {
            color: #666;
            font-weight: bold;
        }

        .convergence-label {
            text-align: center;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333; display: none;
        }

        .convergence-bar {
            width: 100%;
            height: 10px;
            background: linear-gradient(90deg, #f44336 0%, #FFC107 50%, #4CAF50 100%);
            border-radius: 5px;
            position: relative;
            overflow: hidden;
        }

        .convergence-indicator {
            position: absolute;
            width: 4px;
            height: 100%;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            left: 0%;
            transition: left 0.5s;
        }

        .info {
            margin-top: 20px;
            padding: 15px;
            background: #e3f2fd;
            border-radius: 10px;
            font-size: 14px;
            color: #1976d2; display:none;
        }

        .sensitivity-control {
            margin-bottom: 20px;
            padding: 20px;
            background: #fff3e0;
            border-radius: 10px; display:none;
        }

        .mix-control {
            margin-bottom: 20px;
            padding: 20px;
            background: #e8f5e9;
            border-radius: 10px;
            display: none;
        }

        .mix-control.visible {
            display: none;
        }

        .sensitivity-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-weight: bold;
            color: #333;
        }

        .mix-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-weight: bold;
            color: #2e7d32;
        }

        .mix-slider-group {
            margin-bottom: 15px;
        }

        .mix-slider-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 14px;
            color: #333;
        }

        .strings-section {
            margin-top: 20px;
            padding: 20px;
            background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
            border-radius: 10px;
            display: none;
        }

        .strings-section.visible {
            display: none;
        }

        .strings-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .strings-title {
            font-weight: bold;
            color: #880e4f;
            font-size: 16px;
        }

        #stringsBtn {
            background: linear-gradient(135deg, #ad1457 0%, #c2185b 100%);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }

        #stringsBtn:hover:not(:disabled) {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(173, 20, 87, 0.4);
        }

        #stringsBtn.active {
            background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
        }

        .strings-info {
            margin-top: 10px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 5px;
            font-size: 14px;
            color: #4a148c;
        }

        .chord-display {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .chord-box {
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid #ad1457;
            border-radius: 8px;
            font-weight: bold;
            color: #880e4f;
            min-width: 60px;
            text-align: center;
            transition: all 0.3s;
        }

        .chord-box.active {
            background: #ad1457;
            color: white;
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(173, 20, 87, 0.5);
        }

        .chord-box.fermata {
            position: relative;
        }

        .chord-box.fermata::after {
            content: '𝄐';
            position: absolute;
            top: -15px;
            right: -5px;
            font-size: 20px;
            color: #ad1457;
            font-weight: normal;
        }

        .chord-box.active.fermata::after {
            color: white;
        }

        .chord-box.active.fermata {
            animation: fermata-pulse 2s infinite;
        }

        @keyframes fermata-pulse {
            0%, 100% { 
                transform: scale(1.1);
                box-shadow: 0 5px 15px rgba(173, 20, 87, 0.5);
            }
            50% { 
                transform: scale(1.15);
                box-shadow: 0 8px 20px rgba(173, 20, 87, 0.7);
            }
        }

        .chord-box.rest {
            background: rgba(200, 200, 200, 0.5);
            border: 2px dashed #999;
            color: #666;
            font-size: 24px;
            min-width: 50px;
        }

        .chord-box.rest.active {
            background: rgba(150, 150, 150, 0.7);
            border-color: #666;
            color: #333;
            transform: scale(1.05);
            animation: rest-pulse 1s infinite;
        }

        @keyframes rest-pulse {
            0%, 100% { 
                opacity: 0.6;
            }
            50% { 
                opacity: 1.0;
            }
        }

        .slider {
            width: 100%;
            height: 8px;
            border-radius: 5px;
            background: #ddd;
            outline: none;
            -webkit-appearance: none;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #FF9800;
            cursor: pointer;
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #FF9800;
            cursor: pointer;
        }

        .rhythm-section {
            margin-top: 20px;
            padding: 20px;
            background: #f3e5f5;
            border-radius: 10px;
            display: none;
        }

        .rhythm-section.visible {
            display: none;
        }

        .rhythm-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .rhythm-title {
            font-weight: bold;
            color: #6a1b9a;
            font-size: 16px;
        }

        #rhythmBtn {
            background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }

        #rhythmBtn:hover:not(:disabled) {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(106, 27, 154, 0.4);
        }

        #rhythmBtn.active {
            background: linear-gradient(135deg, #c2185b 0%, #e91e63 100%);
        }

        .rhythm-visualizer {
            display: grid;
            grid-template-columns: repeat(16, 1fr);
            gap: 5px;
            margin-top: 15px;
        }

        .beat-indicator {
            height: 30px;
            background: #ce93d8;
            border-radius: 5px;
            transition: all 0.1s;
        }

        .beat-indicator.active {
            background: #6a1b9a;
            transform: scale(1.2);
            box-shadow: 0 0 15px rgba(106, 27, 154, 0.6);
        }

        .beat-indicator.perc {
            background: #ffb74d;
        }

        .beat-indicator.perc.active {
            background: #ff6f00;
            box-shadow: 0 0 15px rgba(255, 111, 0, 0.8);
        }

        .rhythm-info {
            margin-top: 10px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            font-size: 14px;
            color: #4a148c;
        }
        header { width: 100%; position: fixed; top:0; left: 0; background-color: #FFF; height: 60px; z-index: 2; line-height: 60px;}
        #resetBtn { position: absolute; top:0; left: 0; height: 60px;}

nav { display: flex; border-top:1px solid #ddd; margin-top: 20px; box-shadow: 0 -1px 7px rgba(0,0,0,.1);}
nav a { display: block; width: 50%; height: 80px; line-height: 1; color: #000; text-align: center; text-decoration: none; font-size: 11px; padding-top: 50px; box-sizing: border-box;}
nav a.selected { color: #303f9f; font-weight: 600; }
nav a.p1 { background-image: url("../img/1.svg"); background-repeat: no-repeat; background-position: center 10px; background-size: 35px;}
nav a.p2 { background-image: url("../img/2.svg"); background-repeat: no-repeat; background-position: center 10px; background-size: 35px;}
nav a.p3 { background-image: url("../img/3.svg"); background-repeat: no-repeat; background-position: center 5px; background-size: 45px;}