#hero-upload {
  --hero-lemon-padding-top: 0px;
}

.hero-upload {
  --hu-destructive: #e6104d;
  --hu-destructive-container: #fbd7e1;
  --hu-panel-h: clamp(20.5rem, calc(100dvh - 34rem), 30rem);
  --hu-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 12h16m0 0l-6-6m6 6l-6 6'/%3E%3C/svg%3E");
  --hu-close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z'/%3E%3C/svg%3E");
  --hu-result-card-padding: 1rem;
  --hu-result-card-border-radius: var(--border-radius);
  --hu-vo-width: 880px;
  --hu-app-cta-max-width: 960px;
  .audio-controls {
    --ac-primary: var(--ncs-cc-primary);
    --ac-on-primary: var(--ncs-cc-on-primary);
  }

  [hidden] {
    display: none !important;
  }

  .cta:not(.cta-secondary) {
    --cta-bg: var(--ncs-cc-primary);
    --cta-text: var(--ncs-cc-on-primary);
  }

  .cta-secondary {
    --ncs-primary: var(--ncs-cc-primary);
  }

  .uploader {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: min(calc(var(--page-max-width) * 0.7), 100vw - 2.5rem);
    margin: 1.5rem auto 0;
    text-align: left;
  }

  .file-upload-zone .dropzone,
  .file-upload-zone .file-selected-panel {
    border-radius: var(--innerContainerBorderRadius);
  }

  .upload-stage-wrap {
    position: relative;
  }

  .hu-bullets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
  }

  .hu-bullet {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-sm);
    color: var(--text);
  }

  .hu-bullet-check {
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    color: #27ae60;
  }

  .hu-tabs-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    .pill-tabs {
      margin-left: 0;
      margin-right: 0;
      min-width: 0;
    }
  }

  .hu-live-tabs .pill-tab {
    color: #dc0f0f;
    opacity: 1;

    > span::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: currentColor;
      margin-inline-end: 6px;
      vertical-align: center;
      animation: hu-live-blink 1.2s ease-in-out infinite;
    }

    &[data-active] {
      background-color: color-mix(in srgb, #dc0f0f 8%, transparent);
      color: #dc0f0f;
    }

    &[data-active]::after,
    &:hover::after {
      background-color: #dc0f0f;
    }
  }

  @keyframes hu-live-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
  }

  .panel-live .hu-live-icon {
    color: #dc0f0f;

    svg {
      width: 1.6rem;
      height: 1.6rem;
    }
  }

  .upload-stage {
    view-transition-name: hu-stage;
    --innerContainerBorderRadius: 30px;
    --outerContainerPadding: calc(var(--innerContainerBorderRadius) * 2 / 3);
    --outerContainerBorderRadius: calc(var(--innerContainerBorderRadius) + var(--outerContainerPadding));
    width: 100%;
    padding: var(--outerContainerPadding);
    border: 1px solid var(--ncs-cc-container-strong);
    background: var(--background);
    border-radius: var(--outerContainerBorderRadius);
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .panels {
    view-transition-name: hu-media;
    position: relative;
    overflow: hidden;
    height: var(--hu-panel-h);
    border: 1px solid var(--ncs-cc-container-strong);
    border-radius: var(--innerContainerBorderRadius);
    background: var(--background);
  }
  
  &[data-no-tabs] .upload-stage {
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--innerContainerBorderRadius);
  }

  &[data-state="idle"] .panels:has(.panel-file[data-active]) {
    border-style: dashed;
  }

  &[data-state="idle"][data-source="file"]:not([data-dragging]) .panels:has(.panel-file[data-active]) {
    border-style: solid;
  }

  &[data-state="idle"] .panels:has(.panel-file[data-active]:hover) {
    border-color: var(--ncs-cc-primary);
  }

  .panel-inner {
    display: none;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  &[data-state="idle"] [data-panel][data-active] {
    display: flex;
  }

  &:not([data-state="idle"]):not([data-state="trial-used"]) .panel-loading {
    display: flex;
  }

  &[data-state="trial-used"] .panel-trial-used {
    display: flex;
  }

  &[data-state="trial-used"] .hu-bullets {
    display: none;
  }

  .panel-trial-used {
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--ncs-cc-container-weak);
  }

  .hu-trial-used-title {
    max-width: 34ch;
    font-size: var(--font-ml);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
  }

  .panel-file,
  .panel-url,
  .panel-record,
  .panel-live {
    position: relative;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    text-align: center;
    padding: max(2.5rem, calc(var(--hu-panel-h) / 2 - 130px)) 1.5rem 1.5rem;
  }

  .panel-file {
    cursor: pointer;

    .file-upload-zone {
      display: flex;
      justify-content: center;
      width: 100%;
    }

    .dropzone {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 0;
      border: 0;
      background: none;
      box-shadow: none;
      padding: 0;
      gap: 0;
    }

    .dz-icon {
      display: none;
    }
  }

  .panel-url {
    .url-upload-zone {
      width: 100%;
    }

    .uploader-form {
      flex-direction: row;
      height: calc(var(--innerContainerBorderRadius) * 2 - 2px);
      border: 1px solid var(--ncs-cc-container-strong);
      border-radius: 100px;
      background: var(--background);
      align-items: center;
      padding: 6px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;

      &:focus-within {
        border-color: var(--ncs-cc-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--ncs-cc-primary) 25%, transparent);
      }

      input[type="text"] {
        height: 100%;
        border: 0;
        margin: 0;
        background: none;
      }

      > .cta {
        --cta-size: var(--font-sm);
        align-self: stretch;
        height: auto;
        margin: 0;
        padding: 0 1.25rem;
      }
    }
  }

  .panel-record {
    .record-idle,
    .record-recording,
    .record-source {
      flex: 0 0 auto;
      width: 100%;
      max-width: 30rem;
      margin-inline: auto;
    }
  }

  .panel-file,
  .panel-url,
  .panel-record,
  .panel-live {
    background: var(--ncs-cc-container-weak);
  }

  &[data-can-convert] [data-panel][data-active] {
    justify-content: center;
  }

  .hu-tab-icon {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--background);
    color: var(--ncs-cc-primary-contrast);

    svg {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  .hu-tab-title {
    width: 100%;
    text-align: center;
    font-size: var(--font-ml);
    font-weight: var(--font-weight-regular);
  }

  .hu-tab-formats {
    width: 100%;
    margin: 0 0 0.75rem 0;
    text-align: center;
    font-size: var(--font-xs);
    color: color-mix(in srgb, var(--text) 55%, transparent);
  }

  .hu-tab-icon svg {
    view-transition-name: hu-tab-icon;
  }

  .hu-tab-title {
    view-transition-name: hu-tab-title;
  }

  .hu-tab-formats {
    view-transition-name: hu-tab-formats;
  }

  .panel-file .browse,
  .panel-url .uploader-form,
  .panel-record .recording-button,
  .dz-selected .source-chip,
  .record-recording .record-stop {
    view-transition-name: hu-tab-body;
  }

  &[data-source="record"] .upload-cta {
    view-transition-name: hu-tab-body;
  }

  .record-recording .record-viz,
  .record-source .audio-controls {
    view-transition-name: hu-rec-media;
  }

  &[data-source="file"] .panel-file .browse,
  &[data-dragging] .panel-file .browse,
  &[data-file-error] .panel-file .browse {
    view-transition-name: none;
  }
  
  &[data-source="file"] .panel-file .hu-tab-icon svg,
  &[data-dragging] .panel-file .hu-tab-icon svg,
  &[data-file-error] .panel-file .hu-tab-icon svg,
  &[data-source="file"] .panel-file .hu-tab-title,
  &[data-dragging] .panel-file .hu-tab-title,
  &[data-file-error] .panel-file .hu-tab-title,
  &[data-source="file"] .panel-file .hu-tab-formats,
  &[data-dragging] .panel-file .hu-tab-formats,
  &[data-file-error] .panel-file .hu-tab-formats {
    view-transition-name: none;
  }

  .hu-sample-link {
    view-transition-name: hu-tab-sample;
  }

  .panel-loading {
    align-items: center;
    padding: 1.5rem;
  }

  .dz-global-drop {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    font-size: var(--font-ml);
    color: var(--ncs-cc-primary);
    pointer-events: none;
  }

  &[data-dragging] .panels {
    background: var(--ncs-cc-container-weak);
  }

  &[data-dragging] .panels:has(.panel-file[data-active]) {
    border-color: var(--ncs-cc-primary);
  }

  &[data-dragging] .panel-file .dz-global-drop {
    display: flex;
  }

  &[data-dragging] .panel-file > :not(.dz-selected):not(.dz-global-drop),
  &[data-source="file"] .panel-file > :not(.dz-selected):not(.dz-global-drop),
  &[data-file-error] .panel-file > :not(.dz-selected):not(.dz-global-drop) {
    opacity: 0;
    visibility: hidden;
  }

  .dz-selected {
    display: none;
    position: absolute;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.25rem;
  }

  &[data-source="file"]:not([data-dragging]) .panel-file .dz-selected,
  &[data-file-error]:not([data-dragging]) .panel-file .dz-selected {
    display: flex;
  }

  .dz-selected-another {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-sm);
    color: var(--ncs-cc-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .record-idle {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .record-recording,
  .record-source {
    display: none;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
  }

  &[data-recording] .panel-record .record-idle {
    display: none;
  }

  &[data-recording] .panel-record .record-recording {
    display: flex;
  }

  &[data-source="record"] .panel-record .record-idle {
    display: none;
  }

  &[data-source="record"] .panel-record .record-recording {
    display: none;
  }

  &[data-source="record"] .panel-record .record-source {
    display: flex;
  }

  .recording-button {
    --recordingButtonSize: 80px;
    --fullRadius: 9999px;
    --cError: #f25767;
    --cErrorH: #d94e5c;
    --cErrorO5: rgb(242 87 103 / 50%);
    --cErrorO1: rgb(242 87 103 / 10%);
    --cWhiteButtonText: #fff;
    --transitionDefault: 0.25s ease-in-out;
    box-sizing: border-box;
    width: var(--recordingButtonSize);
    height: var(--recordingButtonSize);
    border-radius: var(--fullRadius);
    background: linear-gradient(135deg, var(--cError) 0%, var(--cErrorH) 100%);
    border: 3px solid var(--cErrorO5);
    color: var(--cWhiteButtonText);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transitionDefault);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--fullRadius);
      background: radial-gradient(circle at center, transparent 0%, var(--cErrorO1) 100%);
      opacity: 0;
      transition: opacity var(--transitionDefault);
    }

    &:hover:not(:disabled) {
      transform: scale(1.05);
      border-color: var(--cError);
    }

    &:hover:not(:disabled)::before {
      opacity: 1;
    }

    &:active:not(:disabled) {
      transform: scale(0.98);
    }

    &:disabled {
      opacity: 0.65;
      cursor: not-allowed;
      background: rgb(16 115 230 / 10%);
      border-color: rgb(16 115 230 / 10%);
      color: #1073e6;
    }
  }

  .recording-icon {
    position: relative;
    z-index: 1;
    color: currentColor;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  @media (max-width: 799.98px) {
    .recording-button {
      --recordingButtonSize: 70px;
    }
  }

  .record-viz {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
  }

  .record-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    text-align: center;
    font-size: var(--font-xs);
  }

  .source-chip {
    --source-chip-control-size: 2.5rem;

    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: max-content;
    max-width: min(34rem, 100%);
    padding: 0.5rem;
    border-radius: 999px;
    background: var(--background);
    border: 1px solid var(--ncs-cc-container-strong);
  }

  .source-chip-icon,
  .source-chip-clear {
    flex: 0 0 var(--source-chip-control-size);
    width: var(--source-chip-control-size);
    height: var(--source-chip-control-size);
    align-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .source-chip-icon {
    background: var(--ncs-cc-primary);
    color: var(--ncs-cc-on-primary);
    font-size: var(--font-md);

    svg {
      width: 1.1rem;
      height: 1.1rem;
    }
  }
  .source-chip-glyph {
    display: none;
  }
  .source-chip-icon[data-kind="audio"] .source-chip-glyph-audio,
  .source-chip-icon[data-kind="video"] .source-chip-glyph-video {
    display: inline-flex;
  }

  .source-chip-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.25;
  }

  .source-chip-name {
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .source-chip-size {
    font-size: var(--font-xs);
    color: color-mix(in srgb, var(--text) 55%, transparent);
  }

  .source-chip-clear,
  .record-stop {
    position: relative;
    border: 0;
    cursor: pointer;
    background: var(--hu-destructive-container);
    color: var(--hu-destructive);
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }

  .source-chip-clear {
    margin-left: auto;
    background: transparent;

    &::before {
      content: "";
      width: 100%;
      height: 100%;
      background: currentColor;
      mask: var(--hu-close-icon) center / 120% no-repeat;
    }
  }

  .record-source .source-chip-clear {
    width: 40px;
    height: 40px;
    align-self: center;
    aspect-ratio: auto;
  }

  .record-stop {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;

    &::before {
      content: "";
      width: 0.85rem;
      height: 0.85rem;
      border-radius: 3px;
      background: currentColor;
    }
  }

  .source-chip-clear:hover {
    background: transparent;
    filter: brightness(0.92);
  }

  .record-stop:hover {
    background: color-mix(in srgb, var(--hu-destructive) 20%, white);
  }

  .record-stop:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hu-destructive) 25%, transparent);
  }

  .source-chip-clear:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--hu-destructive) 55%, transparent);
    outline-offset: 2px;
  }

  &[data-file-error] .source-chip-icon {
    background: var(--maestra-red);
  }

  &[data-file-error] .source-chip {
    border-color: color-mix(in srgb, var(--maestra-red) 45%, transparent);
  }

  &[data-file-error] .source-chip-name {
    color: var(--maestra-red);
  }

  &[data-source="url"] .panel-url .uploader-form {
    border-color: var(--ncs-cc-primary);
  }

  .lang-row {
    display: none;
    grid-template-rows: auto auto;
    justify-content: center;
    justify-items: center;
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.35rem;

    &:has([data-upload="to-field"]) {
      grid-template-columns: auto auto auto;
    }

    [data-upload="from-field"],
    [data-upload="to-field"] {
      display: contents;
    }

    .langrow {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / 3;
      gap: 0.35rem;
      max-width: none;
      text-align: left;
      --langrow-select-bg: color-mix(in srgb, var(--background) 65%, transparent);
      --langrow-select-border: var(--glass-border);
      --langrow-select-border-radius: 100px;
      --langrow-select-font-size: var(--font-sm);
      --langrow-select-hover-border: 1px solid var(--ncs-cc-primary);
      --langrow-select-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--ncs-cc-primary) 25%, transparent);
      --langrow-label-color: var(--text-faded);
      --langrow-label-font-size: var(--font-xs);
      --langrow-select-box-shadow: none;
    }

    [data-upload="from-field"] .langrow {
      grid-column: 1;
    }

    [data-upload="to-field"] .langrow {
      grid-column: 3;
    }

    .lang-arrow {
      grid-column: 2;
      grid-row: 2;
      align-self: center;
      color: color-mix(in srgb, var(--text) 50%, transparent);
      font-size: var(--font-md);
    }
  }

  &[data-can-convert] .lang-row {
    display: grid;
  }

  a.cta {
    font-weight: var(--font-weight-regular);
  }

  .panel-actions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 1.25rem);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    opacity: 0;
    transform: translateY(0.4rem);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  &[data-state="idle"][data-can-convert] .panel-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  &[data-can-convert] [data-panel][data-active] {
    padding-bottom: 8.5rem;
  }

  &[data-can-convert] .panel-file .dz-selected {
    bottom: 8.5rem;
  }

  &[data-can-convert] .panel-url .hu-tab-icon,
  &[data-can-convert] .panel-url .hu-tab-title,
  &[data-can-convert] .panel-url .hu-tab-formats,
  &[data-can-convert] .panel-record .hu-tab-icon,
  &[data-can-convert] .panel-record .hu-tab-title,
  &[data-can-convert] .panel-record .hu-tab-formats {
    display: none;
  }

  .hu-sample-link {
    align-self: center;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-sm);
    color: var(--text-faded);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;

    &:hover {
      color: var(--ncs-cc-primary);
    }
  }

  &:not([data-state="idle"]) .hu-sample-link {
    display: none;
  }

  &[data-can-convert] .hu-sample-link {
    display: none;
  }

  &[data-state="uploading"] .upload-stage,
  &[data-state="processing"] .upload-stage {
    cursor: progress;
  }

  &[data-state="uploading"] .upload-stage .pill-tabs,
  &[data-state="processing"] .upload-stage .pill-tabs {
    cursor: not-allowed;
    user-select: none;
  }

  &[data-state="uploading"] .upload-stage .pill-tab,
  &[data-state="processing"] .upload-stage .pill-tab {
    pointer-events: none;
  }

  .loading-text {
    font-size: var(--font-md);
    max-width: 32ch;
    line-height: 1.5;
    text-align: center;
  }

  &[data-state="error"] .panel-loading .spinner {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0 auto;
    animation: none;
  }

  .spinner {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: conic-gradient(var(--maestra-green) 0% 30%,
        var(--maestra-blue) 30% 45%,
        var(--maestra-yellow) 45% 70%,
        transparent 70% 100%);
    animation: heroUploadSpinner 1.2s linear infinite;
    pointer-events: none;
    transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease, margin 0.3s ease;

    &::after {
      content: '';
      position: absolute;
      inset: 3px;
      background: var(--background);
      border-radius: 50%;
    }
  }

  .hu-result {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 1.5rem auto 0;
    padding-bottom: var(--section-padding-solo);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: max-width var(--hu-accordion-dur, 0.28s) cubic-bezier(0.65, 0, 0.35, 1);
  }

  .hu-result-card { order: 2; }
  .hu-app-cta { order: 3; }
  .hu-result.cta-above .hu-app-cta { order: 1; }

  .hu-result-panel {
    flex: 1;
    min-height: 0;
  }

  &:not([data-intent="dubbing"]) .hu-result.hide-transcript .hu-result-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
    column-gap: 0;
  }
  &[data-intent="dubbing"] .hu-result.hide-transcript .hu-result-panel {
    max-height: 0;
  }
  &[data-intent="dubbing"] .hu-result.hide-transcript .hu-result-grid {
    row-gap: 0;
  }
  .hu-result.hide-transcript .hu-result-panel {
    opacity: 0;
  }

  .hu-transcript-toggle {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: var(--ncs-cc-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    box-sizing: content-box;
    flex: 0 0 auto;
    width: var(--tt-w-show, auto);
    overflow: hidden;
    white-space: nowrap;
    transition: width var(--hu-accordion-dur, 0.28s) cubic-bezier(0.65, 0, 0.35, 1);

    &:hover { opacity: 0.8; }

    .tt-hide { display: none; }
  }

  .hu-result:not(.hide-transcript) .hu-transcript-toggle {
    width: var(--tt-w-hide, auto);
    .tt-show { display: none; }
    .tt-hide { display: inline; }
  }

  .hu-result-back {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: var(--font-weight-regular);
    color: var(--ncs-cc-primary-contrast);
    margin-inline-end: 1rem;

    &:hover {
      opacity: 0.8;
    }
  }

  .hu-result-back-arrow {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  &[data-sample] .hu-result-back {
    display: inline-flex;
  }

  .hu-result-fileinfo {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
  }

  &[data-sample] .hu-app-cta .hu-app-cta-check {
    display: none;
  }
  &[data-sample] .hu-app-cta .hu-app-cta-text {
    column-gap: 0;
  }

  &[data-sample] .hu-app-cta-chips {
    transform: none;
  }

  .hu-result-title {
    font-size: var(--font-md);
    font-weight: var(--font-weight-regular);
    color: color-mix(in srgb, var(--text) 60%, transparent);
    margin: 0 0 0.85rem;
  }

  &[data-sample] .hu-result-title {
    display: none;
  }

  &:not([data-sample]) .hu-app-cta-sample {
    display: none;
  }
  &[data-sample] .hu-app-cta-default {
    display: none;
  }

  .hu-app-cta-title .hu-app-cta-default,
  .hu-app-cta-title .hu-app-cta-sample {
    view-transition-name: hu-page-title;
    width: fit-content;
  }

  .hu-result-card {
    view-transition-name: hu-stage;
    border: 1px solid var(--ncs-cc-container-strong);
    border-radius: var(--border-radius);
    background: var(--background);
    padding: var(--hu-result-card-padding);
    transition: width var(--hu-accordion-dur, 0.28s) cubic-bezier(0.65, 0, 0.35, 1);

    &:not(.hero-upload[data-intent="dubbing"] .hu-result-card):not(.hu-result.hide-transcript .hu-result-card) {
      width: var(--page-max-width);
    }
  }

  .hu-result-cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    padding: 0.1rem 0 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid var(--ncs-cc-container-strong);
  }

  .hu-result-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .hu-result-filename {
    font-size: var(--font-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .hu-result-credit {
    flex-shrink: 0;
    font-size: var(--font-sm);
    font-weight: var(--font-weight-regular);
    color: color-mix(in srgb, var(--text) 55%, transparent);
    white-space: nowrap;
  }

  .hu-result-credit:empty {
    display: none;
  }

  .hu-result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    font-size: var(--font-sm);
    color: color-mix(in srgb, var(--text) 55%, transparent);

    > span {
      text-transform: capitalize;
      white-space: nowrap;
    }

    > span:empty {
      display: none;
    }

    .hu-meta-sep {
      font-style: normal;
      margin: 0 0.5rem;
      opacity: 0.6;
    }

    > :empty + .hu-meta-sep,
    > [hidden] + .hu-meta-sep,
    .hu-meta-sep:has(+ :empty),
    .hu-meta-sep:has(+ [hidden]) {
      display: none;
    }
  }

  .hu-meta-arrow {
    flex: 0 0 auto;
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin: 0 0.3em;
    vertical-align: middle;
    background-color: currentColor;
    mask: var(--hu-arrow-icon) center / contain no-repeat;
    translate: 0 -1px;
  }

  html[dir="rtl"] &  .hu-meta-arrow,
  body[dir="rtl"] & .hu-meta-arrow,
  &[dir="rtl"] .hu-meta-arrow {
    transform: scaleX(-1);
  }

  .hu-result-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: 1.25rem;
    align-items: stretch;
    transition: grid-template-columns var(--hu-accordion-dur, 0.28s) cubic-bezier(0.65, 0, 0.35, 1),
      column-gap var(--hu-accordion-dur, 0.28s) cubic-bezier(0.65, 0, 0.35, 1),
      row-gap var(--hu-accordion-dur, 0.28s) cubic-bezier(0.65, 0, 0.35, 1);
  }

  &[data-intent="dubbing"] .hu-result {
    max-width: var(--hu-vo-width);
  }

  .hu-result.hide-transcript {
    max-width: var(--hu-vo-width);
  }

  &[data-intent="dubbing"] .hu-result-card,
  .hu-result.hide-transcript .hu-result-card {
    width: min(var(--hu-vo-width), 100%);
  }

  &[data-intent="dubbing"] .hu-result-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hu-result-media {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
  }

  .hu-media-frame {
    view-transition-name: hu-media;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--hu-result-card-border-radius) - var(--hu-result-card-padding));
    overflow: hidden;
    background: #000;

    video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    &[data-media="audio"],
    &[data-media="error"] {
      aspect-ratio: auto;
      height: 260px;
      background: none;
      border: 0;
      border-radius: 0;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: center;

      @media (max-width: 767px) {
        height: auto;
        padding-block: 1.5rem;
      }
    }
  }

  .hu-media-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    font-size: var(--font-sm);
    color: color-mix(in srgb, var(--text) 60%, transparent);
  }

  .hu-media-error-icon {
    display: inline-flex;
    color: color-mix(in srgb, var(--text) 45%, transparent);

    svg {
      width: 2rem;
      height: 2rem;
    }
  }

  .hu-audio {
    width: 100%;
    background: var(--ncs-cc-container-weak);
    border-radius: calc(var(--border-radius) - 0.5rem);
    padding: 0.85rem 1rem;
  }

  .hu-result-tools:empty {
    display: none;
  }

  .hu-result-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
  }

  &[data-convert-type="voiceovers"] .hu-result-tools .hu-dub-bar {
    margin-inline-end: auto;
    margin-inline: auto;
  }

  .hu-dub-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .hu-dub-tabs.pill-tabs {
    margin: 0;
    align-self: center;
    max-width: 100%;
  }

  .hu-result-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    contain: size;
    transition: max-height var(--hu-accordion-dur, 0.28s) cubic-bezier(0.65, 0, 0.35, 1), opacity 0.14s ease;
  }

  &[data-intent="dubbing"] .hu-result-panel {
    contain: none;
    max-height: 420px;
  }

  .hu-result:not(.hide-transcript) .hu-result-panel {
    transition: max-height var(--hu-accordion-dur, 0.28s) cubic-bezier(0.65, 0, 0.35, 1),
      opacity 0.16s ease calc(var(--hu-accordion-dur, 0.28s) - 0.04s);
  }

  .hu-segments {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.1rem;
  }

  .hu-seg {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    text-align: start;
    padding: 0.5rem 0.7rem;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;

    &:hover {
      background: var(--ncs-cc-container-weak);
    }

    &.active {
      border-color: color-mix(in srgb, var(--ncs-cc-primary) 35%, transparent);
      background: color-mix(in srgb, var(--ncs-cc-primary) 7%, var(--background));
    }
  }

  .hu-seg-time {
    width: fit-content;
    font-size: var(--font-xs);
    font-weight: var(--font-weight-regular);
    color: var(--ncs-cc-primary);
    margin-block-start: 0.25rem;
  }

  .hu-seg-text {
    font-size: var(--font-sm);
    line-height: 1.55;
  }

  .hu-speaker {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--ncs-cc-primary);
    margin: 0.55rem 0 0.15rem;
  }

  .hu-segments > .hu-speaker:first-child {
    margin-top: 0;
  }

  .hu-para-speaker {
    grid-column: 1 / -1;
    margin: 0 0 0.15rem;
  }

  .hu-segments.mode-caption .hu-seg {
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
  }

  .hu-segments.mode-caption .hu-seg-time {
    flex-shrink: 0;
  }

  .hu-segments.mode-transcript {
    gap: 0;
  }

  .hu-para {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    transition: background 0.18s ease;
    &.active {
      background: var(--ncs-cc-container-weak);
    }
  }

  .hu-para-time {
    grid-column: 1;
    align-self: start;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
  }

  .hu-para-body {
    grid-column: 2;
    margin: 0;
    font-size: var(--font-sm);
    line-height: 1.7;
    color: var(--text);
    width: fit-content;
  }

  .hu-seg-word {
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s ease;

    &:hover {
      background: var(--ncs-cc-container-weak);
    }
  }

  .hu-teaser {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.4rem;
  }

  .hu-seg-teaser {
    filter: blur(4px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
  }

  .hu-teaser-cta {
    position: absolute;;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    padding: 1.25rem 1rem 0.75rem;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--background) 75%, transparent) 45%, var(--background) 80%);

    p {
      margin: 0;
      max-width: 34ch;
      font-size: var(--font-sm);
      color: color-mix(in srgb, var(--text) 70%, transparent);
    }
  }

  .hu-teaser-btn {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--ncs-cc-on-primary);
    background: var(--ncs-cc-primary);
    padding: 0.55rem 1.15rem;
    border-radius: var(--button-border-radius, 999px);
  }

  .hu-app-cta {
    display: flex;
    align-items: center;
    gap: 0.85rem 1.25rem;
    flex-wrap: wrap;
    margin-top: 0;
    padding: 1rem 1.35rem;
    border: 1px solid var(--ncs-cc-container-strong);
    border-radius: var(--border-radius);
    background: linear-gradient(145deg, color-mix(in srgb, var(--ncs-cc-primary) 20%, var(--background)) 0%, var(--background) 100%);
    --tag-bg: var(--background);
    width: 100%;
    max-width: var(--hu-app-cta-max-width);
    margin-inline: auto;

    .hu-app-cta-title {
      display: contents;
    }

    .hu-app-cta-check {
      grid-column: 1;
      grid-row: 1;
      flex-shrink: 0;
      display: inline-flex;
      width: 1.3em;
      height: 1.3em;
      color: #27ae60;

      svg {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .hu-app-cta-title > span:not(.hu-app-cta-check) {
      grid-column: 2;
      grid-row: 1;
      font-size: var(--font-md);
      font-weight: var(--font-weight-bold);
      color: var(--text);
    }

    p:not(.hu-app-cta-title) {
      grid-column: 2;
      font-size: var(--font-sm);
      margin: 0.25rem 0 0;
      line-height: 1.5;
      color: var(--text-faded);
    }
  }

  .hu-app-cta-btn {
    view-transition-name: hu-tab-body;
    height: 40px;
    padding: 0 28px;
    font-size: calc(var(--font-sm) + 1px);
  }

  .hu-app-cta-text {
    min-width: 0;
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
    align-items: center;
  }

  .hu-app-cta-chips {
    grid-column: 2;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0.7rem 0 0;
    transform: translateX(-14px);
  }

  .hu-app-cta-chip {
    padding: 6px 14px;
    background: var(--tag-bg, var(--ncs-cc-container-weak));
    border: none;
    border-radius: 999px;
    font-size: var(--font-xxs);
    color: var(--text-faded);
    font-weight: 500;
    white-space: nowrap;
  }

  .hu-app-cta-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
  }

  .hu-app-cta-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    font-size: var(--font-xxs);
    color: var(--text-faded);

    > span ~ span::before {
      content: "·";
      margin: 0 0.4rem;
      opacity: 0.6;
    }
  }

  .muted {
    color: color-mix(in srgb, var(--text) 60%, transparent);
    font-size: var(--font-sm);
  }

  @media (max-width: 991px) {

    .hu-result-grid {
      grid-template-columns: 1fr;
    }

    &:not([data-intent="dubbing"]) .hu-result-panel,
    &[data-intent="dubbing"] .hu-result-panel {
      contain: none;
      max-height: 360px;
    }

    &:not([data-intent="dubbing"]) .hu-result.hide-transcript .hu-result-grid {
      grid-template-columns: 1fr;
      column-gap: 0;
      row-gap: 0;
    }
    .hu-result.hide-transcript .hu-result-panel {
      max-height: 0;
    }
  }

  @media (max-width: 768px) {
    .hu-app-cta-text {
      display: block;
    }

    .hu-app-cta .hu-app-cta-title {
      display: flex;
      justify-content: flex-start;
      gap: 0.5rem;
    }

    .hu-app-cta-chips {
      transform: none;
    }

    .hu-app-cta-action {
      align-items: flex-start;
    }

    .hu-app-cta-btn {
      width: 100%;
    }

    .uploader {
      width: min(600px, 100vw - 2.5rem);
    }

    .pill-tab {
      padding-inline: 0.7rem;
    }

    &[data-can-convert] .lang-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .lang-row [data-upload="from-field"],
    .lang-row [data-upload="to-field"] {
      display: block;
    }

    .lang-row .langrow {
      display: flex;
      flex-direction: column;
      grid-row: auto;
      grid-column: auto;
      grid-template-rows: none;
    }

    .lang-arrow {
      display: none;
    }

    .hu-app-cta {
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      text-align: start;

      .hu-app-cta-note {
        text-align: center;
        margin-inline: auto;
      }
    }
  }

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

    .panel-actions {
      transition: none;
    }

    .hu-seg {
      transition: none;
    }

    .hu-seg.active {
      transform: none;
    }
  }

  :is(.hero-form):has(& [data-upload="result"]:not([hidden])) {
    padding-inline: 1.5rem;

    .section-header {
      display: none;
    }
  }

  :is(.hero.lemon:not([data-iframe-mode="true"])):has(& [data-upload="result"]:not([hidden])) .hero-viewport-wrapper {
    height: auto;
    max-height: none;
  }


  :is(.hero-form):has(&[data-title-morph]) h1.section-title {
    view-transition-name: hu-page-title;
    width: fit-content;
    margin-inline: auto;
  }
}

::view-transition-old(hu-page-title) {
  animation: hu-vt-fade-out 0.05s ease both;
}
::view-transition-new(hu-page-title) {
  animation: hu-vt-fade-in 0.05s ease both;
}

@keyframes heroUploadSpinner {
  to {
    transform: rotate(360deg);
  }
}

:root {
  --hu-morph-dur: 0.2s;
  --hu-accordion-dur: 0.28s;
  --hu-morph-shadow: 0 0 0 1px inset color-mix(in srgb, var(--background) 16%, transparent);
}

::view-transition-group(hu-tab-sample) {
  animation-duration: var(--hu-morph-dur);
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

::view-transition-group(hu-tab-icon) {
  animation-duration: 0.52s;
}

::view-transition-old(hu-tab-icon) {
  animation: hu-vt-icon-old 0.1s ease-in both;
}

::view-transition-new(hu-tab-icon) {
  animation: hu-vt-icon-new 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

::view-transition-group(hu-tab-title),
::view-transition-group(hu-tab-formats) {
  animation: none;
}

::view-transition-old(hu-tab-title),
::view-transition-old(hu-tab-formats) {
  animation: hu-vt-fade-out 0.1s ease both;
}

::view-transition-new(hu-tab-title),
::view-transition-new(hu-tab-formats) {
  animation: hu-vt-fade-in 0.12s ease 0.1s both;
}

::view-transition-group(hu-tab-body) {
  animation-duration: var(--hu-morph-dur);
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: var(--hu-morph-shadow);
  border-radius: 100px;
  background: var(--hu-morph-bg, transparent);
}

::view-transition-old(hu-tab-body) {
  animation: hu-vt-fade-out 0.045s ease both;
}

::view-transition-new(hu-tab-body) {
  animation: hu-vt-fade-in 0.06s ease var(--hu-morph-dur) both;
}

::view-transition-group(hu-rec-media) {
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

::view-transition-old(hu-rec-media) {
  animation: hu-vt-fade-out 0.12s ease both;
}

::view-transition-new(hu-rec-media) {
  animation: hu-vt-fade-in 0.16s ease 0.1s both;
}

@keyframes hu-vt-icon-old {
  to { opacity: 0; transform: scale(0.5); }
}

@keyframes hu-vt-icon-new {
  0% { opacity: 0; transform: scale(0.5); }
  22% { opacity: 1; transform: scale(0.55); }
  62% { transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes hu-vt-fade-out {
  to { opacity: 0; }
}

@keyframes hu-vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body:has(.hero-upload .hu-result[data-upload="result"]:not([hidden]))
  #ms-header:not(:has(> .header-in.sticky-header)) #ms-nav li.btn-shape a {
  background: color-mix(in srgb, var(--ncs-primary) 8%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--ncs-primary) 20%, transparent);
  box-shadow: none;
  font-weight: var(--font-weight-regular);
}

body:has(.hero-upload .hu-result[data-upload="result"]:not([hidden]))
  #ms-header:not(:has(> .header-in.sticky-header)) #ms-nav li.btn-shape a:hover {
  background: color-mix(in srgb, var(--ncs-primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--ncs-primary) 40%, transparent);
  box-shadow: none;
}

body:has(.hero-upload .hu-result[data-upload="result"]:not([hidden]))
  .mobile-header .mobile-inline-cta .mini-cta-button-inline {
  background: color-mix(in srgb, var(--ncs-primary) 8%, transparent);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--ncs-primary) 20%, transparent);
  box-shadow: none;
  font-weight: var(--font-weight-regular);
}

body:has(.hero-upload .hu-result[data-upload="result"]:not([hidden]))
  .mobile-header .mobile-inline-cta .mini-cta-button-inline:hover,
body:has(.hero-upload .hu-result[data-upload="result"]:not([hidden]))
  .mobile-header .mobile-inline-cta .mini-cta-button-inline:focus {
  background: color-mix(in srgb, var(--ncs-primary) 15%, transparent);
  border-color: color-mix(in srgb, var(--ncs-primary) 40%, transparent);
  box-shadow: none;
}