.tool-body{max-width:760px}.tool-body h2{margin:0 0 11px;font-size:14px;font-weight:600;line-height:1.4}.tool-body form{margin:0}.tool-body label{color:#555;font-size:13px}.tool-body textarea,.tool-body input[type=date]{display:block;width:100%;margin-top:7px}.tool-body textarea{min-height:150px;resize:vertical;margin-top:0;line-height:1.6}.tool-body textarea::placeholder{color:#777}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.check-row{display:flex;align-items:center;gap:7px;margin:18px 0}.check-row input{accent-color:#333}.tool-body button{min-height:39px;margin-top:18px;padding:0 17px;border:0;border-radius:6px;background:#1e1e1e;color:#fff;font-size:13px;font-weight:600}.tool-body button:not(:disabled):hover{background:#3a3a3a}.tool-body button:disabled{background:#ddd;color:#777;cursor:not-allowed}.tool-body .secondary-button{margin-top:10px;border:1px solid #d5d5d5;background:#fff;color:#333}.tool-body .secondary-button:not(:disabled):hover{background:#f4f4f4;color:#333}.tool-body .secondary-button:disabled{background:#f4f4f4;color:#999}.action-row{display:flex;align-items:center;gap:12px}.action-row span{margin-top:18px;color:#666;font-size:12px}.result-area{margin-top:27px;padding-top:18px;border-top:1px solid #e6e6e6}.result-area p{margin:0;color:#666;font-size:14px}.tool-note{margin-top:40px;padding-top:16px;border-top:1px solid #eee}.tool-note h2{font-weight:500}.tool-note p{margin:0;color:#777;font-size:13px;line-height:1.7}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}.stat-grid>div{border-top:1px solid #e6e6e6;padding-top:12px}.stat-grid dt{color:#777;font-size:12px}.stat-grid dd{margin:6px 0 0;font-size:20px;font-weight:600}@media(max-width:600px){.field-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.image-upload,.file-upload{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:0 18px}
.tool-body .form-field-label{margin:0;color:#222;font-size:14px;font-weight:600;line-height:1.4}
.tool-body :where(input[type=text],input[type=number],input[type=date],textarea,select){box-sizing:border-box;min-height:40px;padding:8px 12px;border:1px solid #d5d5d5;border-radius:6px;outline:none;background:#fafafa;color:#222;font:inherit;font-size:14px}
.tool-body :where(input[type=text],input[type=number],input[type=date],textarea,select):focus-visible{border-color:#555;outline:none}
.tool-body textarea{min-height:150px}
.tool-body select{padding-right:40px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='m1 1 5 5 5-5' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;background-size:12px 8px}
.image-upload-drop,.file-upload-drop{display:flex;align-items:center;flex-wrap:wrap;gap:7px 14px;padding:13px 16px;border:1px dashed #bfbfbf;border-radius:7px;background:#fafafa;cursor:pointer}
.image-upload-drop:hover,.image-upload-drop.is-dragover,.file-upload-drop:hover,.file-upload-drop.is-dragover{border-color:#777;background:#f7f7f7}
.image-upload-drop span,.file-upload-drop span{color:#222;font-size:14px;font-weight:600}
.image-upload-drop small,.file-upload-drop small{color:#777;font-size:12px;line-height:1.5}
.image-upload input[type=file],.file-upload input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.image-upload-drop:has(+ input:focus-visible),.file-upload-drop:has(+ input:focus-visible){border-color:#555;outline:none}
.image-upload-error,.file-upload-error{grid-column:2;margin:10px 0 0;color:#a33;font-size:13px}
.image-upload-error[hidden],.file-upload-error[hidden]{display:none}
@media(max-width:700px){.image-upload,.file-upload{grid-template-columns:minmax(0,1fr);gap:10px}.image-upload-error,.file-upload-error{grid-column:1}}
.pdf-tool{max-width:900px}.pdf-selection,.pdf-options{margin-top:22px}.pdf-selection-heading,.pdf-result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.pdf-selection-heading h2,.pdf-result-heading h2{margin:0}.pdf-selection-heading span{color:#777;font-size:12px}.pdf-file-list,.pdf-page-list{list-style:none;margin:10px 0 0;padding:0}.pdf-file-list li,.pdf-page-list li{display:flex;align-items:center;gap:8px;min-height:48px;padding:7px 0;border-bottom:1px solid #ececec}.pdf-file-list li span,.pdf-page-list li span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;font-size:13px}.pdf-page-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;max-height:400px;overflow:auto}.pdf-page-list li{cursor:grab}.pdf-page-list li:active{cursor:grabbing}.pdf-tool .pdf-file-list button,.pdf-tool .pdf-page-list button{min-height:30px;margin:0;padding:0 9px;font-size:12px}.pdf-options input,.pdf-options select{display:block;width:min(100%,420px);margin-top:8px}.pdf-options small,.pdf-options p{display:block;margin:7px 0 0;color:#777;font-size:12px;line-height:1.6}.pdf-options h2{margin-bottom:4px}.pdf-angle-options select{width:130px}.pdf-tool .pdf-result{min-height:115px}.pdf-result-heading .secondary-button{display:flex;align-items:center;justify-content:center;min-height:39px;margin:0;padding:0 17px;border-radius:6px;text-decoration:none;font-weight:600}.pdf-result-heading .secondary-button[hidden]{display:none}.pdf-tool #pdf-status{margin-top:12px}.pdf-tool #pdf-status[data-state=error]{color:#a33}.pdf-waiting{display:flex;gap:6px;align-items:center;height:28px;margin-top:10px}.pdf-waiting[hidden]{display:none}.pdf-waiting i{display:block;width:10px;height:14px;border:1px solid #bbb;border-radius:2px;background:#f3f3f3;animation:pdf-page-pulse 1.2s ease-in-out infinite}.pdf-waiting i:nth-child(2){animation-delay:.15s}.pdf-waiting i:nth-child(3){animation-delay:.3s}@keyframes pdf-page-pulse{50%{transform:translateY(-4px);background:#ddd}}@media(prefers-reduced-motion:reduce){.pdf-waiting i{animation:none}}@media(max-width:700px){.pdf-page-list{grid-template-columns:1fr}.pdf-file-list li{flex-wrap:wrap}.pdf-file-list li span{flex-basis:100%}}
.image-compare-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:39px;margin-bottom:10px}
.image-compare-heading h2{min-width:0;margin:0}
.image-compare-heading button,.image-compare-heading .secondary-button{flex:none;margin:0}
.image-compare-heading .secondary-button[hidden]{display:none}
.media-option-row[hidden]{display:none}
.tool-examples{max-width:900px;margin-top:26px;color:#222}
.tool-example-heading{margin-bottom:18px}
.tool-example-heading h2{margin:0;font-size:14px;font-weight:600;line-height:1.4}
.tool-example-heading p{margin:8px 0 0;color:#777;font-size:13px;line-height:1.7}
.tool-example-panels{display:flex;align-items:center;gap:16px}
.tool-example-panel{flex:1;min-width:0;margin:0}
.tool-example-label{margin-bottom:10px;color:#555;font-size:13px;font-weight:500;line-height:1.5}
.tool-example-image,.tool-example-video{display:block;box-sizing:border-box;width:100%;height:auto;border-radius:6px;background:#f7f7f7}
.tool-example-transparent{background-color:#fff;background-image:conic-gradient(#eee 25%,transparent 0 50%,#eee 0 75%,transparent 0);background-size:20px 20px}
.tool-example-arrow{display:flex;flex:none;align-items:center;justify-content:center;width:24px;color:#999}
.tool-example-arrow svg{display:block;width:24px;height:24px}
.tool-example-caption{margin:10px 0 0;color:#777;font-size:12px;line-height:1.6}
.tool-example-source{margin:14px 0 0;color:#999;font-size:11px;line-height:1.6}
.tool-example-source a{color:#777;text-decoration:underline;text-underline-offset:3px}
.tool-example-source a:hover{color:#333}
.tool-example-audio,.tool-example-text{padding:20px;border:1px solid #e9e9e9;border-radius:6px;background:#fafafa}
.tool-example-audio audio{display:block;width:100%;height:40px}
.tool-example-text pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:13px;line-height:1.8}
.tool-example-preview>.tool-example-panel{max-width:600px}
@media(max-width:700px){.tool-example-panels{gap:10px}.tool-example-arrow{width:18px}.tool-example-arrow svg{width:18px;height:18px}.tool-example-audio,.tool-example-text{padding:12px}.tool-example-flow .tool-example-panels{flex-direction:column;align-items:stretch}.tool-example-flow .tool-example-arrow{align-self:center;transform:rotate(90deg)}}
@media(max-width:560px){.tool-example-comparison .tool-example-panels{flex-direction:column;align-items:stretch}.tool-example-comparison .tool-example-arrow{align-self:center;transform:rotate(90deg)}}
.media-image-tool,.media-video-tool{max-width:900px}.media-form{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:14px 18px}.media-form .image-upload,.media-form .file-upload,.media-option-row{grid-column:1/-1;grid-template-columns:subgrid}.media-option-row{display:grid;align-items:center}.media-option-control{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}.media-option-control input[type=number],.media-option-control input[type=text],.media-option-control select{width:120px}.media-option-control input[type=range]{width:180px;accent-color:#444}.media-option-control small{color:#777;font-size:12px}.media-image-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px;margin-top:25px;padding-top:18px;border-top:1px solid #e6e6e6}.media-image-compare[hidden],.media-image-compare img[hidden],.media-image-compare .secondary-button[hidden],.media-image-waiting[hidden]{display:none}.media-image-compare section{min-width:0}.media-image-compare img{display:block;width:100%;height:auto}.media-image-compare .secondary-button{display:flex;align-items:center;justify-content:center;min-height:39px;margin:0;padding:0 17px;border-radius:6px;text-decoration:none;font-size:13px;font-weight:600}.media-image-compare #media-image-status{margin:11px 0 0;color:#777;font-size:13px}.media-image-compare #media-image-status[data-state=error]{color:#a33}.media-detail{margin:9px 0;color:#777;font-size:12px}.media-image-waiting{display:flex;align-items:center;justify-content:center;gap:7px;min-height:180px;background:linear-gradient(110deg,#f7f7f7,#eee,#f7f7f7);background-size:200% 100%;animation:media-sweep 2s linear infinite}.media-image-waiting i{width:6px;height:6px;border-radius:50%;background:#555;animation:media-dot 1.2s ease-in-out infinite}.media-image-waiting i:nth-child(2){animation-delay:.16s}.media-image-waiting i:nth-child(3){animation-delay:.32s}@keyframes media-sweep{to{background-position:-200% 0}}@keyframes media-dot{50%{transform:translateY(-4px);opacity:.5}}@media(prefers-reduced-motion:reduce){.media-image-waiting,.media-image-waiting i{animation:none}}@media(max-width:700px){.media-form{grid-template-columns:minmax(0,1fr)}.media-option-row{row-gap:10px}.media-image-compare{grid-template-columns:1fr}}
.media-video-section{margin-top:24px;padding-top:18px;border-top:1px solid #e6e6e6}.media-video-section[hidden],.media-video-result[hidden],.media-video-waiting[hidden],.media-video-result .secondary-button[hidden],.media-video-result video[hidden],.media-video-result audio[hidden]{display:none}.media-video-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.media-video-heading h2{margin:0}.media-video-heading button,.media-video-heading .secondary-button{margin:0}.media-video-heading .secondary-button{display:flex;align-items:center;justify-content:center;min-height:39px;padding:0 17px;border:1px solid #d5d5d5;border-radius:6px;text-decoration:none;font-size:13px;font-weight:600}.media-video-section video,.media-video-result video{display:block;width:100%;max-height:520px;background:#111}.media-video-result audio{display:block;width:100%}.media-video-result #media-video-status{margin-top:10px}.media-video-result #media-video-status[data-state=error]{color:#a33}.media-video-waiting{display:flex;align-items:center;justify-content:center;gap:7px;min-height:180px;background:#fafafa}.media-video-waiting i{width:5px;height:22px;border-radius:3px;background:#555;animation:audio-wave 1.15s ease-in-out infinite}.media-video-waiting i:nth-child(2),.media-video-waiting i:nth-child(4){animation-delay:.15s}.media-video-waiting i:nth-child(3){animation-delay:.3s}@media(prefers-reduced-motion:reduce){.media-video-waiting i{animation:none}}

/* Intrinsic widths must fit the available workspace, including tablet sidebars. */
.tool-body,.tool-examples,.media-option-control{min-width:0}
.tool-body :is(img,video,audio){max-width:100%}
.tool-body :is(input,select,textarea){max-width:100%;min-width:0}
.image-upload-drop,.file-upload-drop{min-width:0;overflow-wrap:anywhere}
.tool-note,.media-detail,.tool-example-caption{overflow-wrap:anywhere}
@media(max-width:960px){
  .tool-body :where(input[type=text],input[type=number],input[type=date],textarea,select){min-height:44px;font-size:16px}
  .tool-body button,.tool-body .secondary-button{min-height:44px;font-size:14px}
}
@media(max-width:560px){
  .image-compare-heading,.media-video-heading,.pdf-result-heading,.pdf-selection-heading{flex-wrap:wrap}
  .audio-tool .audio-downloads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin-left:0}
  .pdf-tool .pdf-file-list button,.pdf-tool .pdf-page-list button{min-width:44px;min-height:44px;padding:0 8px}
}

.document-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:14px;margin-top:18px}.document-previews:empty{display:none}.document-previews figure,.document-select label{min-width:0;margin:0;align-self:start}.document-previews canvas,.document-previews img{display:block;box-sizing:border-box;width:100%;height:auto;border:1px solid #e5e5e5;border-radius:4px;background:#fff}.document-previews figcaption,.document-select span{display:block;margin-top:8px;color:#777;font-size:12px}.document-select label{position:relative;cursor:pointer}.document-select input{position:absolute;top:9px;left:9px;accent-color:#333;width:18px;height:18px}.document-select label:has(input:checked) canvas{border-color:#555;box-shadow:0 0 0 1px #555}.image-order-list img{width:56px;height:56px;object-fit:contain;background:#fafafa;border-radius:4px}.image-order-list li{cursor:grab}.image-order-list .is-order-target{background:#f3f3f3}.pdf-result #local-status{margin-top:12px;font-size:13px}.pdf-result #local-status[data-state=error]{color:#a33}.pdf-image-tool #render-pages{width:220px}@media(max-width:560px){.document-previews{grid-template-columns:repeat(2,minmax(0,1fr))}.image-order-list li span{flex-basis:calc(100% - 64px)}}

.pdf-selection-heading button{margin:0;flex:none}.document-preview-title{display:flex;align-items:baseline;gap:10px}

/* tools/_shared/advanced-video.css */
.advanced-video-tool {
  max-width: 900px;
}
.advanced-video-tool .media-option-control select {
  width: 180px;
}
.advanced-video-tool video,
.gif-output {
  display: block;
  max-width: 100%;
  max-height: 560px;
  margin: 0 auto;
}
.advanced-video-tool .advanced-output {
  width: 100%;
  background: #f6f6f6;
}
.gif-timeline {
  padding: 18px 0 4px;
}
.gif-timeline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gif-timeline-heading span,
.gif-time-fields label,
.gif-time-fields small {
  color: #777;
  font-size: 14px;
}
.gif-range-track {
  position: relative;
  height: 32px;
  margin: 16px 10px;
}
.gif-range-track::before,
#advanced-range-fill {
  position: absolute;
  top: 12px;
  height: 8px;
  border-radius: 4px;
  background: #e9e9e9;
  left: 0;
  width: 100%;
  content: "";
}
#advanced-range-fill {
  background: #747f55;
}
.gif-range-track input[type=range] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  pointer-events: none;
}
.gif-range-track input::-webkit-slider-thumb {
  width: 22px;
  height: 28px;
  border: 2px solid #747f55;
  border-radius: 6px;
  background: #fff;
  appearance: none;
  pointer-events: auto;
  cursor: ew-resize;
  box-shadow: 0 1px 3px #0002;
}
.gif-range-track input::-moz-range-thumb {
  width: 18px;
  height: 24px;
  border: 2px solid #747f55;
  border-radius: 6px;
  background: #fff;
  pointer-events: auto;
  cursor: ew-resize;
}
.gif-range-track input::-moz-range-track {
  background: transparent;
}
.gif-range-track input:focus-visible::-webkit-slider-thumb {
  border-color: #222;
  box-shadow: 0 0 0 3px #2222;
}
.gif-range-track input:focus-visible::-moz-range-thumb {
  border-color: #222;
  box-shadow: 0 0 0 3px #2222;
}
.gif-time-fields {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.gif-time-fields input {
  width: 96px;
}
.advanced-waiting {
  display: grid;
  place-items: center;
  min-height: 180px;
  background: #fafaf8;
  border-radius: 8px;
}
.advanced-film {
  display: flex;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e4e5df;
  border-radius: 10px;
  transform: rotate(-3deg);
}
.advanced-film i {
  width: 54px;
  height: 64px;
  border-radius: 5px;
  background:
    linear-gradient(
      135deg,
      #e7e9df,
      #d6dcc8);
  animation: video-frame-pulse 1.6s ease-in-out infinite;
}
.advanced-film i:nth-child(2) {
  animation-delay: 0.2s;
}
.advanced-film i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes video-frame-pulse {
  50% {
    opacity: 0.35;
    transform: translateY(-3px);
  }
}
@media (max-width: 600px) {
  .gif-time-fields {
    gap: 8px;
  }
  .gif-time-fields small {
    flex-basis: 100%;
  }
  .gif-time-fields input {
    width: 80px;
  }
  .gif-timeline-heading {
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .advanced-film i {
    animation: none;
  }
}

/* tools/video-to-gif/src/tool.css */