body {
    font-family: 'Poppins', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    background: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.library-header {
    background: linear-gradient(90deg, #4a90e2, #5cb85c);
    color: white;
    padding: 3rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 3rem;
}
.library-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 30%);
    transform: rotate(0deg);
    animation: rotate 20s linear infinite;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.library-header h1 {
    margin: 0;
    font-size: 3rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.content-section {
    background: white;
    border-radius: 20px;
    padding: 40px;
    margin: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
}
footer {
    text-align: center;
    padding: 2rem;
    margin-top: 3rem;
    background-color: #333;
    color: white;
}

.clock {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: solid 5px red;
  background-color: #f0f8ff;
  display: inline-block;
}

.maru {
  position: absolute;
  top: calc(50%);
  left: calc(50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: red;
  width: 50px;
  height: 50px;
  border: solid 2px silver;
  z-index: 2;
}

.playbutton {
  position: absolute;
  top: calc(50%);
  left: calc(50%);
  transform: translate(-50%, -50%);
  font-size: 35px;
  color: white;
  z-index: 2;
  cursor: pointer;
}

.countarea {
  position: absolute;
  bottom: calc(-40%);
  left: calc(50%);
  transform: translate(-50%, -50%);
}

.mixer-section {
  margin: 2rem auto;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
  border: 2px solid #81C7D4;
  border-radius: 15px;
  padding: 15px;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.mixer-section h3 {
  margin: 0 0 15px 0;
  font-size: 1.1rem;
  color: #333;
  text-align: center;
  font-weight: 600;
}

.mixer-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mixer-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  min-width: 0;
}

.mixer-control label {
  min-width: 70px;
  color: #555;
  font-weight: 500;
  flex-shrink: 0;
}

.volume-slider {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #ddd;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  min-width: 120px;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #81C7D4;
  cursor: pointer;
  border: 2px solid #5ba3b3;
}

.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #81C7D4;
  cursor: pointer;
  border: 2px solid #5ba3b3;
}

.volume-value {
  min-width: 35px;
  text-align: right;
  color: #666;
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.tone-selector {
  padding: 4px 8px;
  border: 1px solid #81C7D4;
  border-radius: 6px;
  background: white;
  color: #333;
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
  width: 110px;
  flex-shrink: 0;
}

.tone-selector:hover {
  border-color: #5ba3b3;
}

.tone-selector:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.tone-selector option {
  background: white;
  color: #333;
  padding: 4px;
}

.button {
  width:80px;
  height:30px;
  border-radius: 30%;
  border: solid 2px #81C7D4;
  z-index: 1;
  cursor: pointer;
}

.keychangebutton {
  width:20px;
  height:20px;
  border-radius: 10%;
  border: solid 2px #81C7D4;
  z-index: 2;
  cursor: pointer;
}

.chordflowtypebutton {
  width:15px;
  height:15px;
  border-radius: 10%;
  border: solid 2px #81C7D4;
  z-index: 2;
  cursor: pointer;
}

.chordflowtypeplus {
  position: absolute;
  top: calc(-8%);
  right: calc(25%);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.chordflowtypeplus > .textposition {
  position: absolute;
  top: calc(50%);
  left: calc(50%);
  z-index: 2;
  transform: translate(-50%, -50%);
}

#keysharpcount {
  position: absolute;
  top: calc(50%);
  right: calc(-17%);
  z-index: 2;
  transform: translate(-50%, -50%);
}

#keyflatcount {
  position: absolute;
  top: calc(50%);
  left: calc(-14%);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.chordflowtypeminus {
  position: absolute;
  top: calc(-8%);
  left: calc(31%);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.chordflowtypeminus > .textposition {
  position: absolute;
  top: calc(50%);
  left: calc(50%);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.keyplus {
  position: absolute;
  top: calc(50%);
  right: calc(-15%);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.keyplus > .textposition {
  position: absolute;
  top: calc(50%);
  left: calc(50%);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.keyminus {
  position: absolute;
  top: calc(50%);
  left: calc(-7%);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.keyminus > .textposition {
  position: absolute;
  top: calc(50%);
  left: calc(50%);
  z-index: 2;
  transform: translate(-50%, -50%);
}

.beatbutton {
  position: absolute;
  top: calc(0%);
  left: calc(75%);
  transform: translate(-50%, -50%);
  transform: rotate(40deg);
}

.beatbutton > .textposition {
  position: absolute;
  top: calc(50%);
  left: calc(50%);
  transform: translate(-50%, -50%);
}

.chordbutton {
  position: absolute;
  top: calc(-8%);
  left: calc(50%);
  transform: translate(-50%, -50%);
}

.chordbutton > .textposition {
  position: absolute;
  top: calc(50%);
  left: calc(50%);
  transform: translate(-50%, -50%);
}

.resetbutton {
  position: absolute;
  top: calc(0%);
  left: calc(-3%);
  transform: translate(-50%, -50%);
  transform: rotate(-40deg);
}

.resetbutton > .textposition {
  position: absolute;
  top: calc(50%);
  left: calc(50%);
  transform: translate(-50%, -50%);
}

.bar {
  position: absolute;
  top: 0;
  left: calc(50% - 3px);
  width: 6px;
  height: 50%;
  transform-origin: bottom;
}

.bar::after {
  position: absolute;
  top: 0;
  content: "";
  width: 6px;
  height: 15px;
  background-color: silver;
}

.beat {
  position: absolute;
  top: 0;
  left: calc(50% - 3px);
  width: 6px;
  height: 50%;
  transform-origin: bottom;
}

.beat::after {
  position: absolute;
  top: 0;
  content: "";
  width: 2px;
  height: 7px;
  background-color: silver;
}

.chordtext {
  border: none;
  background: none;
  width: 60px;
  cursor: pointer;
}

#playbarinitial {
  position: absolute;
  bottom: calc(50%);
  left: calc(50%);
  background-color: orange;
  transform: translate(-50%, -50%);
  transform-origin: bottom;
  border-radius: 20%;
  width: 2px;
  height: 110px;
  transform: rotate(0deg);
}

#bpm {
  position: absolute;
  bottom: calc(28%);
  left: calc(50%);
  transform: translate(-50%, -50%);
  border-radius: 10%;
  border: solid 2px #81C7D4;
  z-index: 1;
  text-align: center;
}

#m0 {
  position: absolute;
  top: calc(10%);
  left: calc(50%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: center;
}

#m1 {
  position: absolute;
  top: calc(15%);
  left: calc(70%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: center;
}

#m2 {
  position: absolute;
  top: calc(30%);
  left: calc(80%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: right;
}

#m3 {
  position: absolute;
  top: calc(50%);
  right: calc(6%);
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: right;
}

#m4 {
  position: absolute;
  top: calc(70%);
  left: calc(80%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: right;
}

#m5 {
  position: absolute;
  top: calc(86%);
  left: calc(70%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: center;
}

#m6 {
  position: absolute;
  top: calc(92%);
  left: calc(50%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: center;
}

#m7 {
  position: absolute;
  top: calc(86%);
  left: calc(30%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: center;
}

#m8 {
  position: absolute;
  top: calc(70%);
  left: calc(12%);
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: left;
}

#m9 {
  position: absolute;
  top: calc(50%);
  left: calc(6%);
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: left;
}

#m10 {
  position: absolute;
  top: calc(30%);
  left: calc(12%);
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: left;
}

#m11 {
  position: absolute;
  top: calc(15%);
  left: calc(30%);
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
  transform-origin: bottom;
  text-align: center;
}

@keyframes rotation-s {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}