@import url('/video-to-audio.css');
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); }
.hero .lede { max-width: 760px; }
.top { flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
.top nav { gap: 18px; }
.settings { justify-content: flex-start; }
.selection-actions { display: flex; gap: 8px; margin-bottom: 25px; }
.selection-actions button { margin: 0; padding: 8px; font-size: 12px; }
.effect-help { min-height: 48px; margin: 10px 0 18px; color: var(--muted); font-size: 13px; }
.secondary:disabled { opacity: .45; }
.selection-mark { display: grid; place-items: center; width: 86px; height: 86px; margin-bottom: 22px; color: var(--accent); border: 1px dashed var(--accent); border-radius: 48% 38% 42% 30%; background: #153c36; transform: rotate(-12deg); font: 44px ui-monospace, monospace!important; }
.demo { align-self: center; padding: 0 10px; }
#photo { display: block; width: 100%; height: auto; border-radius: 8px; cursor: crosshair; background: repeating-conic-gradient(#26343e 0% 25%, #18232c 0% 50%) 50% / 24px 24px; touch-action: manipulation; }
.compare { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--muted); cursor: pointer; }
.compare input { accent-color: var(--accent); width: 18px; height: 18px; }
#photo[aria-busy="true"] { cursor: progress; }
.point-count { margin: 8px 0 0; color: var(--accent); font: 12px/1.6 ui-monospace, monospace; }
#blurControl { font-size: 13px; margin-bottom: 14px; }
#blurControl label { display: flex; justify-content: space-between; }
#blurValue { font-variant-numeric: tabular-nums; color: var(--accent); }
#blur { width: 100%; accent-color: var(--accent); min-height: 36px; }
.result-canvas { margin: 16px 0; overflow: hidden; border-radius: 8px; background: repeating-conic-gradient(#26343e 0% 25%, #18232c 0% 50%) 50% / 24px 24px; }
.result-canvas img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.downloads { display: flex; flex-wrap: wrap; gap: 10px; }
.downloads a { flex: 1 1 180px; margin: 0; }
@media (max-width:720px) { .top nav { width: 100%; margin-left: 0; } .top nav a:last-child { display: inline; } .settings { padding: 18px; } .selection-actions { margin-bottom: 18px; } .hero h1 { font-size: 36px; } }
@media (max-width:720px) {
  .tool { display: flex; flex-direction: column; overflow: visible; background: transparent; border: 0; }
  .stage { display: contents; }
  .drop, #source, #status, #error, #result, .stage-footnote { margin-left: 0; margin-right: 0; }
  .drop, #source { order: 1; }
  .demo, #status, #error { order: 2; }
  .settings { order: 3; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin: 14px 0; }
  #result { order: 4; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 18px; }
  .stage-footnote { order: 5; }
}