.converter-page { min-height: 100vh; color: var(--ink); }
.converter-page .topbar { position: relative; z-index: 2; }
.converter-page .nav a { text-decoration: none; }

.converter-hero {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(480px, 1.22fr);
  gap: clamp(48px, 7vw, 92px);
  align-items: start;
  padding-top: 88px;
  padding-bottom: 112px;
}
.converter-kicker {
  margin: 0 0 22px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
}
.converter-intro h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(64px, 7.5vw, 104px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .82;
}
.converter-intro h1 em { color: var(--accent); font-style: italic; }
.converter-intro > p:not(.converter-kicker) {
  max-width: 420px;
  margin: 36px 0 24px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}
.trust-line {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
}
.trust-line span { color: #52735d; font-size: 9px; }

.converter-panel {
  position: relative;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--border);
  background: #FCFAF5;
  box-shadow: 10px 10px 0 var(--rule);
}
.converter-panel::before {
  content: "AUDIO TOOL";
  position: absolute;
  right: -1px;
  top: -31px;
  padding: 8px 12px;
  color: var(--bg);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
}
.step-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 13px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.step-label > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: var(--bg);
  background: var(--accent);
  font-size: 10px;
}
.url-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border: 1px solid var(--border);
  background: #fff;
}
.url-control:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.play-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: 7px;
  color: #fff;
  background: #2B3A8C;
  font-size: 11px;
}
.url-control input {
  min-width: 0;
  height: 62px;
  padding: 0 14px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
}
.url-control input::placeholder { color: #999184; }
.url-control button {
  align-self: stretch;
  min-width: 142px;
  border: 0;
  color: var(--bg);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  transition: background .18s;
}
.url-control button:hover { background: var(--accent); }
.url-control button:disabled { opacity: .55; cursor: wait; }
.url-control button span { margin-left: 8px; }
.field-help { margin: 10px 0 0; color: var(--muted); font-family: var(--mono); font-size: 10px; }

.loading-state {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.loading-state[hidden], .video-step[hidden], .converter-message[hidden] { display: none; }
.loading-state strong, .loading-state small { display: block; }
.loading-state strong { font-family: var(--serif); font-size: 21px; font-weight: 500; }
.loading-state small { margin-top: 2px; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.spinner { width: 27px; height: 27px; border: 2px solid var(--rule); border-top-color: var(--accent); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.video-step { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rule); }
.video-card {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--rule);
  background: var(--bg);
}
.video-card img { width: 112px; aspect-ratio: 16/10; object-fit: cover; background: var(--rule); }
.video-meta { min-width: 0; }
.video-meta > span { color: var(--accent); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.video-meta h2 { margin: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-family: var(--serif); font-size: 20px; font-weight: 500; }
.video-meta p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.change-link { border: 0; border-bottom: 1px solid currentColor; color: var(--muted); background: transparent; font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.video-step fieldset { margin: 26px 0 0; padding: 0; border: 0; }
.video-step legend { padding: 0; }
.quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quality-option { position: relative; cursor: pointer; }
.quality-option input { position: absolute; opacity: 0; }
.quality-option > span { display: block; padding: 15px; border: 1px solid var(--border); background: #fff; }
.quality-option b { font-family: var(--serif); font-size: 27px; font-weight: 500; }
.quality-option i { margin-left: 4px; color: var(--muted); font-family: var(--mono); font-size: 9px; font-style: normal; }
.quality-option small { display: block; margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.quality-option input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #F1F1F8; }
.quality-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rights-check { display: flex; align-items: center; gap: 9px; margin: 18px 0; color: var(--muted); cursor: pointer; }
.rights-check input { position: absolute; opacity: 0; }
.rights-check > span { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--border); color: transparent; background: #fff; }
.rights-check input:checked + span { color: #fff; background: #2B3A8C; border-color: #2B3A8C; }
.rights-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rights-check small { font-family: var(--mono); font-size: 10px; }
.download-button {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 12px 18px;
  border: 0;
  color: #fff;
  background: #2B3A8C;
  text-align: left;
  transition: background .18s, transform .18s;
}
.download-button:hover { background: #1C1A17; transform: translateY(-1px); }
.download-button:disabled { opacity: .6; cursor: wait; transform: none; }
.download-button b, .download-button small { display: block; }
.download-button b { font-family: var(--serif); font-size: 21px; font-weight: 500; }
.download-button small { margin-top: 3px; color: #d9dcf0; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.download-button i { font-style: normal; font-size: 20px; }
.download-symbol { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.45); font-size: 21px; }
.converter-message { margin-top: 16px; padding: 13px 15px; border: 1px solid #c98975; color: #78351f; background: #faeee9; font-family: var(--mono); font-size: 10px; line-height: 1.5; }
.converter-message.success { border-color: #88a38f; color: #365a40; background: #edf4ee; }

.instructions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; padding-top: 88px; padding-bottom: 88px; border-top: 1px solid var(--rule); }
.instructions h2 { margin: 0; font-family: var(--serif); font-size: clamp(48px, 5vw, 70px); font-weight: 400; letter-spacing: -.045em; line-height: .95; }
.instructions ol { margin: 0; padding: 0; list-style: none; }
.instructions li { display: grid; grid-template-columns: 38px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.instructions li:first-child { padding-top: 0; }
.instructions li > span { padding-top: 3px; color: var(--accent); font-family: var(--mono); font-size: 11px; }
.instructions strong { font-family: var(--serif); font-size: 21px; font-weight: 500; }
.instructions p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.converter-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; padding: 28px 0 38px; border-top: 1px solid var(--rule); color: var(--muted); font-family: var(--mono); font-size: 10px; }
.converter-footer p { margin: 0; text-align: right; }

@media (max-width: 820px) {
  .converter-hero { grid-template-columns: 1fr; padding-top: 64px; }
  .converter-intro > p:not(.converter-kicker) { max-width: 560px; }
  .converter-panel { margin-top: 16px; }
  .instructions { grid-template-columns: 1fr; gap: 52px; }
}
@media (max-width: 620px) {
  .converter-page .container { padding-left: 20px; padding-right: 20px; }
  .converter-page .nav { gap: 12px; }
  .converter-page .nav a:nth-child(2) { display: none; }
  .converter-hero { padding-top: 54px; padding-bottom: 76px; }
  .converter-intro h1 { font-size: clamp(62px, 20vw, 86px); }
  .converter-panel { padding: 20px; box-shadow: 7px 7px 0 var(--rule); }
  .url-control { grid-template-columns: auto 1fr; padding: 6px; }
  .url-control button { grid-column: 1 / -1; min-height: 48px; margin-top: 6px; }
  .video-card { grid-template-columns: 80px 1fr; }
  .video-card img { width: 80px; }
  .change-link { grid-column: 2; justify-self: start; }
  .quality-grid { grid-template-columns: 1fr; }
  .quality-option > span { padding: 12px 15px; }
  .converter-footer { display: block; line-height: 1.6; }
  .converter-footer p { margin-top: 8px; text-align: left; }
  .converter-footer .footer__links { display: flex; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}