@font-face {
      font-family: "Raleway";
      src: url("/assets/Raleway-Regular.ttf") format("truetype");
      font-style: normal;
      font-weight: 400;
      font-display: swap;
    }

    :root {
      color-scheme: dark;
      --page-pad: clamp(20px, 5vw, 72px);
      --control-height: 48px;
      --muted: rgba(255, 255, 255, 0.66);
      --line: rgba(255, 255, 255, 0.22);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      background: #000;
    }

    body {
      overflow: hidden;
      color: #fff;
      font-family: "Raleway", Arial, Helvetica, sans-serif;
      font-weight: 400;
    }

    body.lesson-video--natural-case {
      --word-text-transform: none;
    }

    button,
    input {
      font: inherit;
    }

    .player {
      position: relative;
      display: grid;
      width: 100%;
      min-height: 100svh;
      place-items: center;
      padding:
        max(var(--page-pad), env(safe-area-inset-top))
        max(var(--page-pad), env(safe-area-inset-right))
        max(calc(var(--page-pad) + 76px), env(safe-area-inset-bottom))
        max(var(--page-pad), env(safe-area-inset-left));
      isolation: isolate;
    }

    .word-stage {
      display: grid;
      width: min(88vw, 1280px);
      min-height: clamp(120px, 24vh, 300px);
      place-items: center;
      text-align: center;
    }

    .current-word {
      max-width: 100%;
      overflow-wrap: anywhere;
      color: #fff;
      font-size: clamp(48px, 8vw, 132px);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: 0;
      text-transform: var(--word-text-transform, lowercase);
      text-wrap: balance;
      opacity: 1;
    }

    .current-word[aria-hidden="true"] {
      opacity: 0;
    }

    .controls {
      position: absolute;
      right: max(var(--page-pad), env(safe-area-inset-right));
      bottom: max(22px, env(safe-area-inset-bottom));
      left: max(var(--page-pad), env(safe-area-inset-left));
      display: grid;
      grid-template-columns: var(--control-height) minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      max-width: 1120px;
      margin: 0 auto;
      transition: opacity 180ms ease;
    }

    .play-toggle {
      display: grid;
      width: var(--control-height);
      height: var(--control-height);
      border: 1px solid var(--line);
      border-radius: 50%;
      padding: 0;
      place-items: center;
      background: #111;
      color: #fff;
      cursor: pointer;
    }

    .play-toggle:hover,
    .play-toggle:focus-visible {
      border-color: #fff;
      outline: none;
    }

    .play-toggle span {
      display: block;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;
      line-height: 1;
      transform: translateX(1px);
    }

    .timeline {
      width: 100%;
      height: 26px;
      margin: 0;
      accent-color: #fff;
      cursor: pointer;
    }

    .time {
      min-width: 102px;
      color: var(--muted);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      font-variant-numeric: tabular-nums;
      text-align: right;
      white-space: nowrap;
    }

    .status {
      position: absolute;
      top: max(18px, env(safe-area-inset-top));
      right: var(--page-pad);
      left: var(--page-pad);
      margin: 0;
      color: var(--muted);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      text-align: center;
    }

    .status:empty {
      display: none;
    }

    @media (max-width: 640px) {
      :root {
        --page-pad: 18px;
        --control-height: 44px;
      }

      .player {
        padding-bottom: max(96px, env(safe-area-inset-bottom));
      }

      .word-stage {
        width: 92vw;
      }

      .current-word {
        font-size: clamp(42px, 14vw, 88px);
      }

      .controls {
        grid-template-columns: var(--control-height) minmax(0, 1fr);
        gap: 10px;
      }

      .time {
        grid-column: 1 / -1;
        min-width: 0;
        text-align: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .controls {
        transition: none;
      }
    }