* {
      box-sizing: border-box;
    }

    :root {
      --corner-radius: 20%;
      --box-corner-radius: 6px;
    }

    html,
    body {
      margin: 0;
      height: 100%;
      overflow: hidden;
      font-family: "Pretendard JP", -apple-system, BlinkMacSystemFont, sans-serif;
      background: linear-gradient(180deg, var(--sky-top, #F8CCA8) 10%, var(--sky-middle, #FF2B00) 45%, var(--sky-bottom, #00D4FF) 80%);
      transition: background 4s ease;
    }

    canvas {
      display: block;
    }

    @media (pointer: coarse) {
      html,
      body,
      button,
      canvas {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
      }
    }

    a, a:hover, a:visited {
      color: grey;
      text-decoration: none;
    }

    .mic-ui,
    .wind-ui,
    .wind-button {
      opacity: 0;
      pointer-events: none;
      transition: opacity 600ms ease;
    }

    body.controls-visible .mic-ui,
    body.controls-visible .wind-ui,
    body.controls-visible .wind-button {
      opacity: 1;
      pointer-events: auto;
    }

    .mic-ui {
      position: fixed;
      top: 16px;
      left: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 10;
      font-size: 12px;
      line-height: 1.2;
      color: #111;
    }

    .mic-ui button {
      border-radius: var(--corner-radius);
      border: none;
      background: color-mix(in srgb, #ffffff calc((1 - var(--mic-level, 0)) * 100%), #1ea7ff calc(var(--mic-level, 0) * 100%));
      color: #111;
      padding: 8px 10px;
      cursor: pointer;
      transition: background 120ms linear, opacity 160ms ease;
      font-size: 20px;
    }

    button.mic-button-off:hover {
      opacity: .8;
    }

    .mic-button-off {
      opacity: .3;
    }

    .mic-button-on {
     opacity: 1; 
    }

    .wind-ui {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .wind-info-button,
    .wind-data {
      border: none;
      background: rgba(255,255,255,.8);
      color: #111;
      border-radius: var(--box-corner-radius);
      font-size: 12px;
      line-height: 1.2;
    }

    .wind-info-button {
      width: 28px;
      height: 28px;
      padding: 0;
      cursor: pointer;
      font-weight: 700;
    }

    .wind-info-button:hover {
      background: rgba(255,255,255,1);
    }

    .wind-data {
      padding: 8px 10px;
    }

    .mic-prompt {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: grid;
      place-items: center;
      padding: 20px;
      font-size: 15px;
      line-height: 1.35;
      text-align: center;
      color: #000;
    }

    .mic-prompt[hidden] {
      display: none;
    }

    .mic-prompt-panel {
      width: min(100%, 360px);
      border: 1px solid #ffffff;
      background: rgba(255, 255, 255, 0.74);
      backdrop-filter: blur(10px);
      padding: 18px;
      box-shadow: 0px 0px 30px rgba(26, 228, 255, 0.58);
      border-radius: var(--box-corner-radius);
    }

    .mic-prompt-header {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-bottom: 10px;
    }

    .mic-prompt-title {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.2;
    }

    .mic-prompt-close {
      width: 18px;
      height: 18px;
      padding: 0;
      display: grid;
      place-items: center;
      border: none;
      border-radius: var(--corner-radius);
      background: none;
      color: #111;
      cursor: pointer;
      font-size: 24px;
      line-height: 1;
    }

    .mic-prompt-text {
      margin: 24px 0 32px;
    }

    .mic-prompt-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .mic-prompt-actions button {
      border: none;
      background: #fff;
      color: #111;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      padding: 0;
      cursor: pointer;
      line-height: 1.2;
      border-radius: var(--corner-radius);
      opacity: .7;
    }

    .mic-prompt-actions img {
      width: auto;
      height: 14px;
      display: block;
      object-fit: contain;
    }

    .mic-prompt-actions button:hover {
      opacity: 1;
    }

    .mic-prompt-actions .primary {
      background: rgb(3, 176, 3);
      color: #fff;
    }

    .wind-button {
      position: fixed;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      z-index: 10;
      border: none;
      border-radius: var(--corner-radius);
      background: #ffffff;
      color: #111;
      padding: 12px 18px;
      font-size: 25px;
      line-height: 1.2;
      cursor: pointer;
      touch-action: manipulation;
      user-select: none;
      -webkit-user-select: none;
      -webkit-tap-highlight-color: transparent;
      transition: all 1s ease;
      text-shadow: 0px 0px 1px rgb(105, 105, 105);
    }

    .wind-button:hover {
      background-color: #77afe7;
    }

    .wind-button-active:hover {
      background: #000;
      box-shadow: 0px 0px 20px rgb(255, 255, 255);
    }