body {
			font-family: Arial, sans-serif;
			color: #F3EFE0;
			max-width: 1200px;
			margin: 2rem auto;
			padding: 0 1rem;
			text-align: center;
			background-color: #525252;
		}

		.character-display {
			font-size: 12rem;
			margin: 2rem 0;
			padding: 7px;
			overflow: hidden;
			min-height: 200px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #414141;
			border-radius: 7px;
			border-top: 2px solid #CA3E47;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
		}

		.input-area {
			margin: 2rem 0;
		}

		input[type="text"] {
			font-size: 1.2rem;
			color: #F3EFF0;
			padding: 0.5rem;
			margin: 0.5rem;
			width: 80%;
			max-width: 400px;
			background-color: #414141;
			border: 2px solid #CA3E47;
			border-radius: 7px;
		}

		button {
			font-size: 1.2rem;
			padding: 0.5rem 1rem;
			margin: 0.5rem;
			cursor: pointer;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 7px;
			transition: background-color 0.3s;
		}

		button:hover {
			background-color: #45a049;
		}

		.feedback {
			font-size: 1.2rem;
			margin: 1rem 0;
			min-height: 1.5em;
		}

		.correct {
			color: #4CAF50;
		}

		.incorrect {
			color: #f44336;
		}

		#stats {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 1rem;
			margin: 1rem 0;
			padding: 1rem;
			background-color: #414141;
			border-radius: 7px;
			border-top: 2px solid #CA3E47;
			overflow-y: auto;
		}

		.stat-item {
			font-size: 1.1rem;
			color: #F3EFE0;
		}

		.selection-area {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1rem;
			margin: 1rem 0;
		}

		.selector-box {
			background-color: #414141;
			padding: 1rem;
			border-radius: 7px;
			text-align: left;
			max-height: 500px;
			overflow-y: auto;
		}

		.justification {
			background-color: #414141;
			padding: 1rem;
			border-radius: 7px;
			text-align: left;
			max-height: 500px;
			border-top: 2px solid #CA3E47;
			overflow-y: auto;
		}

		.character-group {
			margin: 0.5rem 0;
			padding: 0.5rem;
			background-color: #525252;
			border-radius: 7px;
		}

		.character-set {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			margin-top: 0.5rem;
			padding-left: 1rem;
		}

		.character-checkbox {
			display: flex;
			align-items: center;
			gap: 0.25rem;
			color: #F3EFE0;
		}

		.toggle-btn {
			font-size: 0.9rem;
			padding: 0.3rem 0.6rem;
			background-color: #2196F3;
		}

		.mode-toggle {
			background-color: #2196F3;
	   }

		.mode-toggle:hover {
			background-color: #1976D2;
		}
		.footer {
			padding: 5px;
			border-radius: 7px;
			bottom: 0;
			right: 0;
			left: 0;
			text-align: right;
			border-top: 2px solid #CA3E47;
			background-color: #414141;
		}

		.font-selector label {
			display: block;
			margin: 8px 0;
			cursor: pointer;
		}

		.font-preview {
			display: inline-block;
			margin-left: 10px;
			font-size: 20px;
			padding: 2px 6px;
/*			border: 1px solid #ddd; */
			border-radius: 3px;
			
		}

		.font-selector {
			background-color: #414141;
			padding: 1rem;
			border-radius: 7px;
			text-align: left;
			max-height: 500px;
			border-top: 2px solid #CA3E47;
			overflow-y: auto;
		}

		@font-face {
			font-family: 'Kana Font 1';
			src: url('Sword.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Kana Font 2';
			src: url('YujiBoku-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Kana Font 3';
			src: url('851CHIKARA-DZUYOKU_kanaB_004.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}

		@font-face {
			font-family: 'Kana Font 4';
			src: url('KS-Kohichi-FeltPen.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}

                @font-face {
                        font-family: 'Kana Font 5';
                        src: url('ArmedBanana.ttf') format('truetype');
                        font-weight: normal;
                        font-style: normal;
                }