@charset "utf-8";
/* CSS Document */
body{font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; background:rgba(73,57,42,1.00); color:#111; margin: 0;}
  h1{color: #FFF; position: fixed; top:4vw; left: 4vw; margin: 0;font-family: "Libre Baskerville", serif; font-weight: 400; font-size: 8vw; z-index: 1;}
h1 span { display: block; font-size: 80%;font-family: "Shippori Mincho", serif;}

@media (orientation: landscape) {
    h1 { font-size: 4vw;}
            }

  h2{font-size:14px; margin:16px 0 8px 0; font-weight:600; color:#333}
  .row{display:flex; gap:12px; align-items:center; margin-bottom:0px; flex-wrap:wrap;}
  canvas{background:#222; max-width:100%; height:auto}
  video{background:#000; max-width:100%; height:auto;}
  .controls{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-bottom:16px;}
  .control-group{border:1px solid #ddd; padding:12px; border-radius:6px; background:#fff}
  label{font-size:13px; display:block; margin-bottom:4px}
  input[type=range]{width:100%; margin-top:4px}
  .value-display{font-size:12px; color:#666; margin-top:2px}
  .small{font-size:12px; color:#555; margin-top:4px}
  button{padding:0; border-radius:6px; border:0px solid #bbb; background:none; cursor:pointer; font-size:13px; width: 80px; height: 80px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 60px; text-indent: -9999px; background-color: rgba(73,57,42,.5);}
 
  button:disabled{opacity:0.5; cursor:not-allowed}
  button.primary{background:#0066cc; color:#fff; border-color:#0052a3}
  button.primary:hover{background:#0052a3}
  button.primary:disabled{background:#6b9dd4}
  #playMusic{ color:#fff; font-weight:500; background-image: url("../img/play.svg");}
  #playMusic:hover:not(:disabled){}
  #stopMusic{color:#fff; background-image: url("../img/pause.svg");}
  .info-panel{background:#e8f4f8; border-left:3px solid #0066cc; padding:10px; margin:12px 0; font-size:12px; line-height:1.5; display: none;}
  .canvas-container{display:flex; flex-direction:column; gap:6px}
  .process-info{font-size:11px; color:#666; margin-top:8px; font-family:monospace; display: none;}
  .state-hidden{display:none !important}
  .state-visible{display:block}
    .control { position: fixed; bottom: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 2;justify-content: center; padding: 40px 0;}
    video,canvas { position: fixed; top:50%; left: 0; transform: translateY(-50%); width: 100%;}
    #reset { position: fixed; top:0; left: 0;z-index: 2; background-image: url("../img/back.svg"); background-size: 30px; border-radius: 0;}
    canvas,video { width: 80%; left: 50%; transform: translate(-50%,-50%);}

#download {position: absolute;
    right: 20px; background-image: url("../img/download.svg"); background-size: 25px; width: 40px; height: 40px;}

#capture { border:10px solid #fff; box-sizing: border-box; background-color: transparent;}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}