:root {
      color-scheme: light;
      --bg: #f6f4ef;
      --surface: #ffffff;
      --text: #202124;
      --muted: #62656a;
      --line: #ded8ce;
      --accent: #176c72;
      --accent-dark: #0f5055;
      --stop: #9d2f2f;
      --shadow: 0 10px 28px rgba(32, 33, 36, 0.09);
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      margin: 0 auto;
      padding: 44px 18px 64px;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }

    .is-hidden {
      display: none;
    }

    .app-shell {
      max-width: 980px;
      margin: 0 auto;
    }

    .consent-screen {
      max-width: 920px;
      margin: 0 auto;
    }

    .consent-card {
      max-height: calc(100vh - 88px);
      overflow: auto;
      padding: 28px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .consent-card h1,
    .consent-card h2 {
      text-align: left;
    }

    .consent-card h1 {
      margin-top: 0;
      font-size: 34px;
    }

    .consent-card h2 {
      margin: 22px 0 8px;
      font-size: 20px;
    }

    .consent-card p,
    .consent-card li {
      color: var(--text);
    }

    .version,
    .app-kicker,
    .professional-note {
      color: var(--muted);
    }

    .version,
    .app-kicker {
      margin: 0 0 8px;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .professional-note {
      margin: 12px 0 0;
      font-size: 15px;
    }

    .consent-check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 24px 0 16px;
      padding: 14px;
      background: #fbfaf7;
      border: 1px solid var(--line);
      font-weight: 700;
    }

    .consent-check input {
      width: 20px;
      height: 20px;
      margin-top: 2px;
      accent-color: var(--accent);
    }

    header {
      max-width: 760px;
      margin: 0 auto 28px;
      text-align: center;
    }

    h1 {
      margin: 0 0 12px;
      font-size: 40px;
      line-height: 1.15;
    }

    .lead {
      margin: 0;
      color: var(--muted);
      font-size: 19px;
    }

    .intro {
      max-width: 760px;
      margin: 0 auto 28px;
      padding: 18px 20px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .intro p {
      margin: 0 0 10px;
    }

    .intro p:last-child {
      margin-bottom: 0;
    }

    .recordings {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .recording {
      min-height: 100%;
      padding: 20px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .recording.active {
      border-color: var(--accent);
      outline: 3px solid rgba(23, 108, 114, 0.12);
    }

    .recording h2 {
      margin: 0 0 6px;
      font-size: 22px;
      line-height: 1.25;
    }

    .instruction {
      min-height: 54px;
      margin: 0 0 16px;
      color: var(--muted);
      font-size: 17px;
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 16px;
    }

    button {
      min-width: 122px;
      border: 0;
      padding: 11px 16px;
      background: var(--accent);
      color: #ffffff;
      font-size: 17px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background: var(--accent-dark);
    }

    button.stop {
      background: var(--stop);
    }

    button:disabled {
      background: #b9bec2;
      cursor: not-allowed;
    }

    .export-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: 16px;
    }

    .results {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .result {
      padding: 12px;
      border: 1px solid var(--line);
      background: #fbfaf7;
    }

    .label {
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .value {
      font-size: 28px;
      font-weight: 700;
      line-height: 1.25;
    }

    .frequency {
      color: var(--muted);
      font-size: 15px;
    }

    .status {
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 15px;
    }

    .tone-list {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

    .tone-list ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
    }

    .tone-list li {
      padding: 6px 9px;
      background: #eef5f4;
      border: 1px solid #c9dddd;
      color: #153f42;
      font-size: 14px;
      font-weight: 700;
    }

    .summary {
      margin-top: 22px;
      padding: 20px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .summary h2 {
      margin: 0 0 12px;
      font-size: 24px;
    }

    .overall {
      display: grid;
      grid-template-columns: minmax(180px, 260px) 1fr;
      gap: 18px;
      margin-bottom: 18px;
      padding: 14px;
      background: #fbfaf7;
      border: 1px solid var(--line);
    }

    .overall-tone {
      font-size: 34px;
      font-weight: 700;
      line-height: 1.2;
    }

    .overall-frequency {
      color: var(--muted);
      font-size: 16px;
    }

    .playback-panel {
      margin-bottom: 18px;
      padding: 16px;
      background: #fbfaf7;
      border: 1px solid var(--line);
    }

    .playback-panel h3 {
      margin: 0 0 12px;
      font-size: 21px;
    }

    .playback-controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      align-items: end;
    }

    .playback-control {
      min-height: 70px;
      padding: 10px;
      border: 1px solid var(--line);
      background: #ffffff;
    }

    .playback-control label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
    }

    .playback-control input[type="checkbox"] {
      width: 20px;
      height: 20px;
      accent-color: var(--accent);
    }

    .playback-control select {
      width: 100%;
      min-height: 38px;
      margin-top: 7px;
      border: 1px solid var(--line);
      background: #ffffff;
      color: var(--text);
      font-size: 16px;
    }

    .playback-control input[type="range"] {
      width: 100%;
      margin-top: 10px;
      accent-color: var(--accent);
    }

    .playback-control.wide {
      grid-column: span 2;
    }

    .playback-frequency {
      margin-top: 5px;
      color: var(--muted);
      font-size: 14px;
    }

    .playback-status {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 15px;
    }

    .tone-text {
      margin-bottom: 18px;
      padding: 16px;
      background: var(--tone-light-bg, #fbfaf7);
      border: 1px solid var(--tone-light-border, var(--line));
    }

    .tone-text h3 {
      margin: 0 0 10px;
      font-size: 21px;
    }

    .tone-text-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .tone-text h4 {
      margin: 0 0 5px;
      color: var(--muted);
      font-size: 14px;
      text-transform: uppercase;
    }

    .tone-text ul {
      margin: 0;
      padding-left: 18px;
    }

    .tone-light-meta {
      margin: -2px 0 12px;
      color: var(--muted);
      font-size: 14px;
    }

    .interpretation-note {
      margin-bottom: 18px;
      padding: 14px;
      background: #f7f8f8;
      border: 1px solid var(--line);
      color: var(--muted);
    }

    .app-footer {
      margin-top: 20px;
      text-align: center;
    }

    .link-button {
      min-width: 0;
      padding: 0;
      background: transparent;
      color: var(--accent);
      font-size: 15px;
      font-weight: 700;
      text-decoration: underline;
    }

    .link-button:hover {
      background: transparent;
      color: var(--accent-dark);
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 10px 8px;
      border-top: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }

    th {
      color: var(--muted);
      font-size: 14px;
      text-transform: uppercase;
    }

    @media (max-width: 760px) {
      body {
        padding-top: 28px;
      }

      h1 {
        font-size: 32px;
      }

      .consent-card {
        max-height: none;
        padding: 20px;
      }

      .recordings,
      .results,
      .overall,
      .playback-controls,
      .tone-text-grid {
        grid-template-columns: 1fr;
      }

      .instruction {
        min-height: auto;
      }
    }