/*
 * Copyright (c) 2026 Igarin
 * This software is released under the MIT License.
 * https://opensource.org
 */

/* Noto Sans JP */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body {
  color: #eeeeee;
  
  background-color: #251e16;
}

body * {
  font-family: "Noto Sans JP", sans-serif;
}

main {
  width: 824px;
  
  padding: 0 100px;
  margin: 0 auto;
}

h1 {
  font-size: 2.5rem;
  
  margin: 3rem 0 1.5rem;
}

h2 {
  font-size: 2rem;
  
  margin: 3rem 0 1.5rem;
}

p {
  line-height: 1.5rem;
  
  margin: 1rem 0;
}

a {
  color: #00cdb9;
}

a:visited {
  color: #aeeae4;
}

table {
  text-align: left;
  
  margin: 1rem 0;
}

td {
  line-height: 2rem;
}

.no-js .app-content {
  display: none;
}

.js .app-content {
  display: block;
}

#carrier-and-modulator-mode {
  /* JavaScript で制御 */
  display: block;
}

#feedback-mode {
  /* JavaScript で制御 */
  display: none;
}

.graph {
  display: flex;
}

.graph * {
  display: block;
}

#cnm-modulator-phase-graph, #cnm-carrier-phase-graph, #fb-carrier-phase-graph {
  width: 258px;
  height: 170px;
}

#cnm-modulator-output-graph, #cnm-carrier-output-graph, #fb-carrier-output-graph {
  width: 50px;
  height: 170px;
}

#cnm-modulator-waveform-graph, #cnm-carrier-waveform-graph, #fb-carrier-waveform-graph {
  width: 516px;
  height: 170px;
}

button {
  border-radius: 8px;
  border-style: solid;
  border-width: 2px;
  
  color: #eeeeee;
  
  font-weight: 600;
  
  margin: 16px 0;
  padding: 16px;
  
  transition: background-color 0.2s, border-color 0.2s;
}

.green-button {
  background-color: #00cdb988;
  border-color: #00cdb9;
}

.green-button:hover {
  background-color: #00ffe588;
  border-color: #00fde4;
}

.red-button {
  background-color: #f95f5d88;
  border-color: #f95f5d;
}

.red-button:hover {
  background-color: #fa878588;
  border-color: #fa817f;
}

#cnm-start-audio-button, #fb-start-audio-button {
  /* JavaScriptで制御 */
  display: block;
}

#cnm-stop-audio-button, #fb-stop-audio-button {
  /* JavaScriptで制御 */
  display: none;
}

footer {
  width: 824px;
  padding: 0 100px;
  margin: 50px auto;
}

hr {
  border: none;
  border-top: 1px solid #eeeeee;
  opacity: 50%;
  
  margin: 64px 0;
}