@charset "UTF-8";
:root {
  --color-success: #15803d;
  --font-ja: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --text-caption: 12px;
  --text-small: 14px;
  --text-body: 16px;
}

.design-two {
  --d2-logo-primary: #009900;
  --d2-logo-accent: #99cc00;
  --d2-brand-rgb: 0 122 0;
  --d2-brand: #007a00;
  --d2-brand-hover: #006600;
  --d2-accent: #007a00;
  --d2-accent-dark: #005c00;
  --d2-paper: #f6f4ee;
  --d2-home: #faf9f5;
  --d2-card: #fffefa;
  --d2-soft: #f0ece4;
  --d2-ink: #171717;
  --d2-muted: #6f6a62;
  --d2-line: #ddd7cc;
  --d2-line-strong: #c6beb1;
  --d2-accent-soft: #f1f6de;
  --d2-accent-soft-strong: #e3edbd;
  min-height: 100vh;
  background: var(--d2-paper);
  color: var(--d2-ink);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-ja);
  font-size: var(--text-body);
}

button,
input,
select {
  font: inherit;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid rgb(var(--d2-brand-rgb)/32%);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--d2-ink);
  color: #fff;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.d2-shell {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
}

.d2-header {
  background: var(--d2-card);
  border-bottom: 1px solid var(--d2-line);
}

.d2-header-inner {
  height: 74px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.d2-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--d2-ink);
  transform-origin: 50% 70%;
}

.d2-logo-mark {
  position: relative;
  width: 46px;
  height: 38px;
  display: block;
  flex: 0 0 auto;
}

.d2-logo-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.d2-logo-mark path {
  fill: none;
  stroke: currentcolor;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.d2-logo-mark circle {
  fill: currentcolor;
}

.d2-logo-cat-line {
  stroke-dasharray: 330;
  stroke-dashoffset: 330;
}

.d2-logo-tail-line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}

.d2-logo-eye {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.d2-logo-accent {
  position: absolute;
  top: 2px;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--d2-logo-accent);
  opacity: 0;
}

.d2-logo-wordmark {
  display: inline-flex;
  align-items: flex-end;
  gap: 7px;
}

.d2-logo-name {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 1;
  white-space: nowrap;
}

.d2-logo-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px) rotate(5deg) scale(0.78);
  transform-origin: center bottom;
}

.d2-logo-tools {
  margin-bottom: 1px;
  padding: 4px 7px 5px;
  border-radius: 999px;
  background: var(--d2-logo-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px) scale(0.7);
}

.d2-logo.is-playing .d2-logo-cat-line {
  animation: draw-cat 6.2s cubic-bezier(0.65, 0, 0.22, 1) both;
}

.d2-logo.is-playing .d2-logo-tail-line {
  animation: draw-tail 6.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.d2-logo.is-playing .d2-logo-eye-left {
  animation: eye-in 6.2s 0.88s both;
}

.d2-logo.is-playing .d2-logo-eye-right {
  animation: eye-in 6.2s 0.95s both;
}

.d2-logo.is-playing .d2-logo-accent {
  animation: dot-pop 6.2s 0.72s cubic-bezier(0.16, 1.55, 0.35, 1) both;
}

.d2-logo.is-playing .d2-logo-mark {
  animation: cat-bob 6.2s 1.18s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.d2-logo.is-playing {
  animation: logo-settle 6.2s 2.28s both;
}

.d2-logo.is-playing .d2-logo-letter:nth-child(1) {
  animation: letter-in 6.2s 1.18s cubic-bezier(0.2, 1.25, 0.3, 1) both;
}

.d2-logo.is-playing .d2-logo-letter:nth-child(2) {
  animation: letter-in 6.2s 1.27s cubic-bezier(0.2, 1.25, 0.3, 1) both;
}

.d2-logo.is-playing .d2-logo-letter:nth-child(3) {
  animation: letter-in 6.2s 1.36s cubic-bezier(0.2, 1.25, 0.3, 1) both;
}

.d2-logo.is-playing .d2-logo-letter:nth-child(4) {
  animation: letter-in 6.2s 1.45s cubic-bezier(0.2, 1.25, 0.3, 1) both;
}

.d2-logo.is-playing .d2-logo-tools {
  animation: tools-in 6.2s 2s cubic-bezier(0.16, 1.5, 0.35, 1) both;
}

@keyframes draw-cat {
  0%, 5% {
    stroke-dashoffset: 330;
  }
  27%, 100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-tail {
  0%, 20% {
    stroke-dashoffset: 80;
  }
  33%, 100% {
    stroke-dashoffset: 0;
  }
}
@keyframes eye-in {
  0%, 6% {
    opacity: 0;
    transform: translateY(-5px) scale(0);
  }
  9% {
    opacity: 1;
    transform: translateY(2px) scale(1.25, 0.72);
  }
  12%, 58% {
    opacity: 1;
    transform: none;
  }
  60% {
    opacity: 1;
    transform: scaleY(0.08);
  }
  63%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes dot-pop {
  0%, 6% {
    opacity: 0;
    transform: scale(0);
  }
  11% {
    opacity: 1;
    transform: scale(1.25);
  }
  14%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes cat-bob {
  0%, 2% {
    transform: translateY(0) rotate(0);
  }
  7% {
    transform: translateY(-13px) rotate(-3deg);
  }
  11% {
    transform: translateY(3px) rotate(2deg) scale(1.03, 0.95);
  }
  15%, 58% {
    transform: none;
  }
  61% {
    transform: rotate(-2deg) translateY(-2px);
  }
  64% {
    transform: rotate(2deg) translateY(1px);
  }
  68%, 100% {
    transform: none;
  }
}
@keyframes letter-in {
  0%, 2% {
    opacity: 0;
    transform: translateY(24px) rotate(5deg) scale(0.78);
  }
  8% {
    opacity: 1;
    transform: translateY(-5px) rotate(-2deg) scale(1.04, 0.96);
  }
  12%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes tools-in {
  0%, 3% {
    opacity: 0;
    transform: translateX(-8px) scale(0.7);
  }
  9% {
    opacity: 1;
    transform: translateX(2px) scale(1.08);
  }
  13%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes logo-settle {
  0%, 4% {
    transform: none;
  }
  7% {
    transform: scale(1.025, 0.975);
  }
  11%, 100% {
    transform: none;
  }
}
.d2-footer {
  padding: 64px 0 22px;
  background: var(--d2-ink);
  color: #e2ddd4;
}

.d2-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 55px;
}

.d2-footer .d2-logo {
  color: #fff;
}

.d2-footer-brand p {
  max-width: 270px;
  color: #b8b0a5;
  line-height: 1.8;
  font-size: var(--text-small);
}

.d2-footer-grid > div:not(:first-child) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

.d2-footer h2 {
  margin: 0 0 7px;
  color: #aaa297;
  font-size: var(--text-caption);
  letter-spacing: 0.12em;
}

.d2-footer a,
.d2-footer p {
  font-size: var(--text-small);
}

.d2-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.d2-footer-bottom {
  margin-top: 50px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #403b35;
  color: #9d958a;
  font-size: var(--text-small);
}

@media (max-width: 920px) {
  .d2-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .d2-footer-brand {
    grid-column: 1/-1;
  }
}
@media (max-width: 640px) {
  .d2-shell {
    width: min(100% - 32px, 1180px);
  }
  .d2-logo {
    gap: 5px;
  }
  .d2-logo-mark {
    width: 38px;
    height: 32px;
  }
  .d2-logo-wordmark {
    gap: 5px;
  }
  .d2-logo-name {
    font-size: 19px;
  }
  .d2-logo-tools {
    padding: 3px 5px 4px;
    font-size: 8px;
  }
  .d2-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 42px 25px;
  }
  .d2-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .d2-logo,
  .d2-logo * {
    animation-delay: 0ms !important;
  }
}
body.site-menu-open {
  overflow: hidden;
}

.d2-menu-toggle,
.d2-menu-fallback {
  min-height: 40px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font-size: var(--text-small);
  font-weight: 700;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.d2-menu-toggle:hover,
.d2-menu-fallback:hover,
.d2-menu-toggle[aria-expanded=true] {
  border-color: var(--d2-line-strong);
  background: var(--d2-paper);
  color: var(--d2-accent-dark);
}

.d2-menu-icon {
  width: 18px;
  display: grid;
  gap: 4px;
}

.d2-menu-icon i {
  height: 2px;
  display: block;
  border-radius: 999px;
  background: currentcolor;
}

.site-menu-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.site-menu-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(23, 23, 23, 0.54);
  cursor: default;
}

.site-menu-panel {
  position: relative;
  width: min(680px, 100%);
  height: 100vh;
  height: 100dvh;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--d2-card);
  color: var(--d2-ink);
  box-shadow: -18px 0 55px rgba(23, 23, 23, 0.18);
}

.site-menu-panel-header {
  min-height: 74px;
  padding: 14px 28px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--d2-line);
}

.site-menu-panel-header > div > span,
.site-menu-heading > span,
.site-menu-secondary > span {
  color: var(--d2-accent);
  font-size: var(--text-caption);
  font-weight: 800;
  letter-spacing: 0.14em;
}

.site-menu-panel-header h2 {
  margin: 2px 0 0;
  font-size: 20px;
}

.site-menu-panel-header > button {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--d2-line);
  border-radius: 50%;
  background: var(--d2-card);
  color: #4f4b45;
  font-size: 27px;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease;
}

.site-menu-panel-header > button:hover {
  background: var(--d2-soft);
  color: var(--d2-ink);
}

.site-menu-scroll {
  padding: 36px 38px 42px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-menu-heading h3 {
  margin: 5px 0 6px;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.035em;
}

.site-menu-heading p {
  margin: 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.site-menu-categories {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.site-menu-category {
  padding: 18px;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-card);
}

.site-menu-category h4 {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-body);
}

.site-menu-category h4 span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  font-size: var(--text-caption);
  font-weight: 800;
}

.site-menu-category > div {
  display: grid;
  gap: 6px;
}

.site-menu-category a {
  min-height: 44px;
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-radius: 7px;
  color: var(--d2-ink);
  transition: background 0.18s ease, color 0.18s ease;
}

.site-menu-category a:hover,
.site-menu-category a[aria-current=page] {
  background: var(--d2-soft);
  color: var(--d2-accent-dark);
}

.site-menu-category a > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--d2-soft);
  font-size: var(--text-caption);
  font-weight: 800;
}

.site-menu-category a strong {
  font-size: var(--text-small);
}

.site-menu-category a i {
  color: var(--d2-accent);
  font-size: 12px;
  font-style: normal;
}

.site-menu-secondary {
  margin-top: 34px;
  padding-top: 25px;
  border-top: 1px solid var(--d2-line);
}

.site-menu-secondary > div {
  margin-top: 13px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}

.site-menu-secondary a {
  padding: 7px 0;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.site-menu-secondary a:hover {
  color: var(--d2-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .d2-menu-toggle {
    min-height: 38px;
    padding-inline: 10px;
  }
  .site-menu-panel {
    width: 100%;
  }
  .site-menu-panel-header {
    min-height: 70px;
    padding-inline: 18px;
  }
  .site-menu-scroll {
    padding: 28px 20px 34px;
  }
  .site-menu-categories,
  .site-menu-secondary > div {
    grid-template-columns: 1fr;
  }
  .site-menu-categories {
    gap: 12px;
  }
}
.home-page {
  background: var(--d2-home);
}

.tool-search {
  position: relative;
  z-index: 10;
}

.tool-search input {
  width: 100%;
  font: inherit;
  outline: none;
}

.tool-search .search-mark {
  position: absolute;
  z-index: 1;
  border: 2px solid currentcolor;
  border-radius: 50%;
}

.tool-search .search-mark::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  background: currentcolor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--d2-card);
  box-shadow: 0 18px 50px rgba(23, 23, 23, 0.16);
  color: var(--d2-ink);
  text-align: left;
}

.search-results a {
  padding: 12px 15px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--d2-line);
}

.search-results a:last-child {
  border-bottom: 0;
}

.search-results a:hover,
.search-results a:focus-visible {
  background: var(--d2-soft);
}

.search-results__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--d2-accent-soft);
  color: var(--d2-accent-dark);
  font-size: 12px;
  font-weight: 800;
}

.search-results strong,
.search-results small {
  display: block;
}

.search-results strong {
  font-size: var(--text-body);
}

.search-results small {
  max-width: 45vw;
  margin-top: 3px;
  overflow: hidden;
  color: var(--d2-muted);
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-results > p {
  margin: 0;
  padding: 18px;
  font-size: 14px;
}

.d2-intro {
  padding: 72px 0 62px;
  background: linear-gradient(180deg, var(--d2-home) 0%, var(--d2-card) 100%);
  text-align: center;
}

.d2-intro-inner {
  max-width: 880px;
}

.d2-trust {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.d2-trust span {
  color: #147a47;
}

.d2-trust i {
  width: 1px;
  height: 14px;
  background: var(--d2-line-strong);
}

.d2-intro h1 {
  margin: 17px 0 14px;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.25;
  letter-spacing: -0.045em;
}

.d2-intro h1 + p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--d2-muted);
  font-size: 16px;
  line-height: 1.8;
}

.tool-search--design2 {
  max-width: 760px;
  margin: 34px auto 0;
  color: #4f4b45;
}

.tool-search--design2 input {
  height: 58px;
  padding: 0 56px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 10px;
  background: var(--d2-card);
  box-shadow: 0 8px 22px rgba(85, 70, 54, 0.08);
  color: var(--d2-ink);
}

.tool-search--design2 input:focus {
  border-color: var(--d2-brand);
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/16%);
}

.tool-search--design2 .search-mark {
  top: 20px;
  left: 21px;
  width: 16px;
  height: 16px;
  color: var(--d2-accent);
}

.tool-search--design2 .search-mark::after {
  top: 11px;
  left: 12px;
}

.d2-quick {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
}

.d2-quick > span {
  color: var(--d2-muted);
}

.d2-quick a {
  padding: 5px 9px;
  border: 1px solid var(--d2-line);
  border-radius: 6px;
  background: var(--d2-card);
  color: #4f4b45;
}

.d2-quick a:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.d2-section {
  padding-top: 70px;
  padding-bottom: 70px;
}

.d2-section-title {
  margin-bottom: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.d2-section-title > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.d2-section-title h2 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.025em;
}

.d2-section-title > p {
  margin: 0 0 2px;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.d2-title-mark {
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--d2-brand);
  color: #fff;
  font: 800 var(--text-caption)/1 Arial, sans-serif;
  letter-spacing: 0.1em;
}

.d2-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.d2-tool-card {
  position: relative;
  min-height: 124px;
  padding: 19px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-card);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.d2-tool-card:hover {
  border-color: var(--d2-logo-accent);
  transform: translateY(-2px);
}

.d2-tool-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  font-size: 14px;
  font-weight: 800;
}

.d2-tool-main strong,
.d2-tool-main small {
  display: block;
}

.d2-tool-main strong {
  padding-top: 1px;
  font-size: 16px;
}

.d2-tool-main small {
  margin-top: 7px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.65;
}

.d2-card-arrow {
  color: var(--d2-muted);
  font-size: 24px;
  line-height: 1;
}

.d2-ad {
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border: 1px dashed var(--d2-line);
  border-radius: 8px;
  background: var(--d2-soft);
  color: var(--d2-muted);
}

.d2-ad--after-popular {
  margin-bottom: 70px;
}

.d2-ad > span {
  padding: 4px 6px;
  border: 1px solid var(--d2-line);
  border-radius: 3px;
  font-size: var(--text-caption);
}

.d2-ad > div strong,
.d2-ad > div small {
  display: block;
}

.d2-ad > div strong {
  font-size: var(--text-small);
  font-weight: 600;
}

.d2-ad > div small {
  margin-top: 4px;
  font-size: var(--text-caption);
}

.adsense-slot {
  min-height: 100px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
}

.adsense-slot__label {
  color: var(--d2-muted);
  font-size: var(--text-caption);
  line-height: 1;
  text-align: center;
}

.adsense-slot .adsbygoogle {
  width: 100%;
  min-height: 90px;
  display: block;
}

.d2-category-section {
  border-block: 1px solid var(--d2-line);
  background: var(--d2-soft);
}

.d2-category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.d2-category-grid > a {
  min-height: 146px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-card);
}

.d2-category-grid > a:hover {
  border-color: var(--d2-brand);
}

.d2-category-number {
  color: var(--d2-muted);
  font: 700 var(--text-caption)/1 Arial, sans-serif;
}

.d2-category-copy {
  align-self: end;
}

.d2-category-copy strong,
.d2-category-copy small {
  display: block;
}

.d2-category-copy strong {
  font-size: 17px;
}

.d2-category-copy small {
  margin-top: 7px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

.d2-count {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  color: var(--d2-accent);
  font: 800 26px/1 Arial, sans-serif;
  text-align: center;
}

.d2-count small {
  display: block;
  margin-top: 4px;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
}

@media (min-width: 921px) {
  .d2-category-grid > a {
    min-height: 112px;
  }
  .d2-category-number {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .d2-category-copy {
    grid-column: 1;
    grid-row: 2;
  }
  .d2-count {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    text-align: center;
  }
}
.d2-all-section {
  margin-top: 70px;
  border-top: 1px solid var(--d2-line);
  background: var(--d2-home);
}

.d2-all-groups {
  border-top: 1px solid var(--d2-line);
}

.d2-all-groups > section {
  padding: 38px 0;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 40px;
  border-bottom: 1px solid var(--d2-line);
  scroll-margin-top: 20px;
}

.d2-group-title {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-content: start;
  gap: 7px;
}

.d2-group-title > span {
  grid-row: 1/3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--d2-brand);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: 800;
}

.d2-group-title h3 {
  margin: 0;
  font-size: 20px;
}

.d2-group-title small {
  color: var(--d2-muted);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
}

.d2-group-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.d2-group-links a {
  min-height: 82px;
  padding: 14px 15px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
}

.d2-group-links a:hover {
  border-color: var(--d2-brand);
}

.d2-group-links strong,
.d2-group-links small {
  display: block;
}

.d2-group-links strong {
  font-size: var(--text-body);
}

.d2-group-links small {
  grid-column: 1;
  margin-top: 5px;
  overflow: hidden;
  color: var(--d2-muted);
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d2-group-links a > span {
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  color: var(--d2-accent);
}

@media (max-width: 920px) {
  .d2-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .d2-tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .d2-intro {
    padding: 52px 0 46px;
  }
  .d2-intro h1 {
    font-size: 32px;
  }
  .d2-intro h1 + p {
    font-size: var(--text-body);
  }
  .d2-quick > span {
    width: 100%;
  }
  .d2-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .d2-section-title > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
  .d2-tool-grid,
  .d2-category-grid {
    grid-template-columns: 1fr;
  }
  .d2-category-grid > a {
    min-height: 108px;
  }
  .d2-all-groups > section {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .d2-group-links {
    grid-template-columns: 1fr;
  }
}
.tool-detail-page {
  min-height: 100vh;
  background: var(--d2-paper);
}

.image-mosaic-tool {
  align-items: start;
}

.image-mosaic-selection-panel,
.image-mosaic-editor-empty,
.image-mosaic-editor-layout {
  grid-column: 1/-1;
}

.image-mosaic-selected {
  margin-top: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
}

.image-mosaic-selected > div:first-child {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.image-mosaic-selected > div:last-child {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.image-mosaic-selected strong,
.image-mosaic-selected small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-mosaic-selected small {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.image-mosaic-selected button,
.image-mosaic-history-actions button,
.image-mosaic-preview-switch button,
.image-mosaic-zoom button {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: 700 var(--text-small)/1.35 var(--font-ja);
  cursor: pointer;
}

.image-mosaic-selected button:hover:not(:disabled),
.image-mosaic-history-actions button:hover:not(:disabled),
.image-mosaic-preview-switch button:hover:not(:disabled),
.image-mosaic-zoom button:hover:not(:disabled) {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.image-mosaic-selected button:disabled,
.image-mosaic-history-actions button:disabled,
.image-mosaic-preview-switch button:disabled,
.image-mosaic-zoom button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.image-mosaic-source-warning {
  margin: 10px 0 0;
  text-align: left;
}

.image-mosaic-editor-empty {
  min-height: 260px;
  padding: 28px 18px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--d2-line-strong);
  border-radius: 9px;
  background: var(--d2-card);
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
  text-align: center;
}

.image-mosaic-editor-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  align-items: start;
  gap: 18px;
}

.image-mosaic-editor-panel,
.image-mosaic-settings-panel {
  min-width: 0;
}

.image-mosaic-settings-panel {
  position: sticky;
  top: 24px;
}

.image-mosaic-editor-toolbar,
.image-mosaic-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-mosaic-editor-toolbar {
  margin-bottom: 10px;
}

.image-mosaic-history-actions,
.image-mosaic-preview-switch,
.image-mosaic-zoom {
  display: flex;
  align-items: center;
  gap: 7px;
}

.image-mosaic-preview-switch,
.image-mosaic-zoom {
  gap: 0;
}

.image-mosaic-preview-switch button,
.image-mosaic-zoom button {
  border-radius: 0;
}

.image-mosaic-preview-switch button:first-child,
.image-mosaic-zoom button:first-child {
  border-radius: 7px 0 0 7px;
}

.image-mosaic-preview-switch button:last-child,
.image-mosaic-zoom button:last-child {
  border-radius: 0 7px 7px 0;
}

.image-mosaic-preview-switch button + button,
.image-mosaic-zoom button + button {
  margin-left: -1px;
}

.image-mosaic-preview-switch button[aria-pressed=true] {
  position: relative;
  z-index: 1;
  border-color: var(--d2-brand);
  background: var(--d2-brand);
  color: #fff;
}

.image-mosaic-viewport {
  min-height: 420px;
  max-height: min(720px, 100vh - 250px);
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--d2-line-strong);
  border-radius: 9px;
  background: #292927;
  scrollbar-gutter: stable;
}

.image-mosaic-canvas-shell {
  position: relative;
  min-width: 1px;
  min-height: 1px;
  margin: auto;
  overflow: visible;
  background-color: #fff;
  background-image: linear-gradient(45deg, #dedbd4 25%, transparent 25%), linear-gradient(-45deg, #dedbd4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dedbd4 75%), linear-gradient(-45deg, transparent 75%, #dedbd4 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  line-height: 0;
}

.image-mosaic-canvas-shell > canvas {
  width: 100%;
  height: 100%;
  display: block;
  outline: 0;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.image-mosaic-canvas-shell > canvas:focus-visible {
  outline: 3px solid var(--d2-brand);
  outline-offset: 3px;
}

.image-mosaic-selection-box {
  position: absolute;
  z-index: 2;
  border: 2px solid #fff;
  border-radius: 1px;
  outline: 2px solid var(--d2-brand);
  outline-offset: 0;
  box-shadow: 0 0 0 9999px rgba(16, 16, 15, 0.15);
  cursor: move;
  touch-action: none;
}

.image-mosaic-selection-box.is-ellipse {
  border-radius: 50%;
}

.image-mosaic-selection-box:focus-visible {
  outline-width: 4px;
}

.image-mosaic-handle {
  position: absolute;
  z-index: 3;
  width: 13px;
  height: 13px;
  display: block;
  border: 2px solid var(--d2-brand);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 23, 23, 0.3);
  transform: translate(-50%, -50%);
}

.image-mosaic-handle--n,
.image-mosaic-handle--s {
  left: 50%;
  cursor: ns-resize;
}

.image-mosaic-handle--n {
  top: 0;
}

.image-mosaic-handle--s {
  top: 100%;
}

.image-mosaic-handle--e,
.image-mosaic-handle--w {
  top: 50%;
  cursor: ew-resize;
}

.image-mosaic-handle--e {
  left: 100%;
}

.image-mosaic-handle--w {
  left: 0;
}

.image-mosaic-handle--ne {
  top: 0;
  left: 100%;
  cursor: nesw-resize;
}

.image-mosaic-handle--nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.image-mosaic-handle--se {
  top: 100%;
  left: 100%;
  cursor: nwse-resize;
}

.image-mosaic-handle--sw {
  top: 100%;
  left: 0;
  cursor: nesw-resize;
}

.image-mosaic-editor-footer {
  margin-top: 10px;
}

.image-mosaic-editor-footer > p {
  min-width: 0;
  margin: 0;
  text-align: left;
}

.image-mosaic-zoom button {
  min-width: 38px;
}

.image-mosaic-zoom button:nth-child(2) {
  min-width: 64px;
}

.image-mosaic-zoom output {
  font: inherit;
}

.image-mosaic-edit-status {
  min-height: 1.6em;
  margin: 9px 0 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.6;
}

.image-mosaic-edit-status.is-error,
.image-mosaic-download-status.is-error {
  color: #b42323;
}

.image-mosaic-edit-status.is-warning {
  color: #7a4a00;
}

.image-mosaic-setting-block + .image-mosaic-setting-block,
.image-mosaic-range-field,
.image-mosaic-color-field {
  margin-top: 14px;
}

.image-mosaic-setting-block,
.image-mosaic-range-field,
.image-mosaic-color-field {
  display: grid;
  gap: 8px;
}

.image-mosaic-setting-label,
.image-mosaic-range-field > span:first-child,
.image-mosaic-color-field > span:first-child {
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-mosaic-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-mosaic-option-grid button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: 700 var(--text-small)/1.25 var(--font-ja);
  cursor: pointer;
}

.image-mosaic-option-grid button[aria-pressed=true] {
  border-color: var(--d2-brand);
  background: var(--d2-brand);
  color: #fff;
}

.image-mosaic-option-grid button:focus-visible {
  outline: 3px solid rgb(var(--d2-brand-rgb)/25%);
  outline-offset: 2px;
}

.image-mosaic-option-grid button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.image-mosaic-range-field > span:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-mosaic-range-field output {
  color: var(--d2-accent);
  font-size: var(--text-small);
  font-weight: 800;
}

.image-mosaic-range-field input[type=range] {
  width: 100%;
  accent-color: var(--d2-brand);
}

.image-mosaic-color-field > span:nth-child(2) {
  height: 42px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
}

.image-mosaic-color-field input {
  width: 52px;
  height: 42px;
  padding: 4px;
  border: 0;
  border-right: 1px solid var(--d2-line);
  background: transparent;
  cursor: pointer;
}

.image-mosaic-color-field output {
  padding-inline: 10px;
  font: 800 var(--text-caption)/1 var(--font-ja);
}

.image-mosaic-color-field small,
.image-mosaic-quality-note {
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.image-mosaic-apply {
  width: 100%;
  margin-top: 16px;
}

.image-mosaic-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.image-mosaic-output-grid > label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-mosaic-quality-note {
  margin: 9px 0 14px;
}

.image-mosaic-settings-error {
  margin-top: 14px;
}

.image-mosaic-download-actions {
  display: grid;
  gap: 8px;
}

.image-mosaic-download-actions > button {
  width: 100%;
}

.image-mosaic-download-status {
  min-height: 1.6em;
  margin: 9px 0 0;
  text-align: center;
}

@media (max-width: 900px) {
  .image-mosaic-editor-layout {
    grid-template-columns: 1fr;
  }
  .image-mosaic-settings-panel {
    position: static;
  }
  .image-mosaic-viewport {
    max-height: 620px;
  }
}
@media (max-width: 640px) {
  .image-mosaic-selected,
  .image-mosaic-editor-toolbar,
  .image-mosaic-editor-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .image-mosaic-selected > div:last-child,
  .image-mosaic-preview-switch,
  .image-mosaic-zoom {
    align-self: flex-end;
  }
  .image-mosaic-history-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .image-mosaic-history-actions button:last-child {
    grid-column: 1/-1;
  }
  .image-mosaic-viewport {
    min-height: 300px;
    max-height: 520px;
    padding: 8px;
  }
  .image-mosaic-output-grid {
    grid-template-columns: 1fr;
  }
}
.web-image-page-title span {
  display: inline-block;
}

.web-image-url-field {
  padding-bottom: 12px;
}

.web-image-url-field output {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.web-image-url-field output.is-over {
  color: #b42323;
}

.web-image-url-input {
  width: 100%;
  min-height: 150px;
  padding: 13px 14px;
  resize: vertical;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font: 600 var(--text-small)/1.8 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.web-image-url-input:hover {
  border-color: var(--d2-brand);
}

.web-image-url-input:focus {
  border-color: var(--d2-brand);
  outline: 3px solid rgb(var(--d2-brand-rgb)/16%);
}

.web-image-url-input.has-error {
  border-color: #c93636;
}

.web-image-url-help {
  margin: 9px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.web-image-usage-box {
  margin: 12px 0 18px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-radius: 8px;
  background: var(--d2-soft);
  color: #4f4b45;
  font-size: var(--text-small);
}

.web-image-usage-box strong {
  color: var(--d2-ink);
}

.web-image-main-status,
.web-image-result-status {
  min-height: 24px;
  margin: 12px 0 0;
  color: var(--color-success);
  font-size: var(--text-small);
  font-weight: 700;
  line-height: 1.6;
}

.web-image-main-status.is-error,
.web-image-result-status.is-error {
  color: #b42323;
}

.web-image-main-status.is-empty,
.web-image-result-status.is-empty {
  color: var(--d2-muted);
}

.web-image-start-actions {
  margin-top: 8px;
}

.web-image-progress-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.web-image-progress-summary progress {
  width: 100%;
  height: 11px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--d2-line);
  accent-color: var(--d2-brand);
}

.web-image-progress-summary progress::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--d2-line);
}

.web-image-progress-summary progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--d2-brand);
}

.web-image-progress-summary progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--d2-brand);
}

.web-image-progress-summary output {
  min-width: 86px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
  text-align: right;
}

.web-image-page-progress {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.web-image-page-progress-row {
  min-height: 49px;
  padding: 8px 2px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--d2-line);
}

.web-image-page-number {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--d2-soft);
  color: var(--d2-muted);
  font: 800 var(--text-caption)/1 Arial, sans-serif;
}

.web-image-page-url {
  min-width: 0;
  overflow: hidden;
  color: #4f4b45;
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-image-page-url strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-image-page-url small {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: 1.5;
  white-space: normal;
}

.web-image-page-state {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.web-image-page-progress-row.is-processing .web-image-page-number {
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
}

.web-image-page-progress-row.is-processing .web-image-page-state {
  color: var(--d2-accent);
}

.web-image-page-progress-row.is-done .web-image-page-state {
  color: var(--color-success);
}

.web-image-page-progress-row.is-error .web-image-page-state {
  color: #b42323;
}

.web-image-page-progress-row.is-error .web-image-page-url small {
  color: #b42323;
}

.web-image-complete {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f6ef;
  color: var(--color-success);
  font-size: var(--text-small);
  font-weight: 800;
}

.web-image-result-toolbar {
  margin-bottom: 20px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-soft);
}

.web-image-result-toolbar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.web-image-result-toolbar-bottom {
  margin: 20px 0 0;
}

.web-image-result-toolbar button,
.web-image-card-actions button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.web-image-result-toolbar button:hover,
.web-image-card-actions button:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.web-image-result-toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.web-image-result-toolbar .web-image-zip-button {
  border-color: var(--d2-brand);
  background: var(--d2-brand);
  color: #fff;
}

.web-image-result-toolbar .web-image-zip-button:hover {
  background: var(--d2-brand-hover);
  color: #fff;
}

.web-image-groups {
  display: grid;
  gap: 24px;
}

.web-image-group {
  min-width: 0;
  padding-top: 19px;
  border-top: 1px solid var(--d2-line-strong);
}

.web-image-group-heading {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.web-image-group-heading > div {
  min-width: 0;
}

.web-image-group-number {
  color: var(--d2-accent);
  font-size: var(--text-caption);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.web-image-group-heading h3 {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: var(--text-small);
  line-height: 1.6;
}

.web-image-group-heading > strong {
  flex: 0 0 auto;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.web-image-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.web-image-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-card);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.web-image-card.is-selected {
  border-color: var(--d2-brand);
  box-shadow: 0 0 0 2px rgb(var(--d2-brand-rgb)/9%);
}

.web-image-preview {
  position: relative;
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--d2-line);
  background-color: #f8f7f3;
  background-image: linear-gradient(45deg, #ebe9e3 25%, transparent 25%), linear-gradient(-45deg, #ebe9e3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ebe9e3 75%), linear-gradient(-45deg, transparent 75%, #ebe9e3 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.web-image-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.web-image-check {
  position: absolute;
  top: 8px;
  left: 8px;
  min-height: 30px;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(23, 23, 23, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--d2-ink);
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: 800;
}

.web-image-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--d2-brand);
}

.web-image-preview-error {
  padding: 8px;
  color: #b42323;
  font-size: var(--text-small);
  font-weight: 800;
}

.web-image-card-details {
  min-height: 105px;
  padding: 11px 12px;
  display: grid;
  align-content: start;
  gap: 5px;
}

.web-image-card-name,
.web-image-card-url,
.web-image-card-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-image-card-name {
  font-size: var(--text-small);
}

.web-image-card-url,
.web-image-card-meta {
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.web-image-card.is-error .web-image-card-meta,
.web-image-card.is-skipped .web-image-card-meta {
  color: #b42323;
  overflow: visible;
  line-height: 1.5;
  text-overflow: clip;
  white-space: normal;
}

.web-image-card-actions {
  padding: 0 12px 12px;
  display: flex;
  gap: 7px;
}

.web-image-card-actions button {
  min-width: 0;
  flex: 1 1 0;
  padding-inline: 6px;
}

.web-image-group-empty,
.web-image-limit-note {
  margin: 0;
  padding: 14px;
  border-radius: 8px;
  background: var(--d2-soft);
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.web-image-limit-note {
  margin-top: 10px;
  color: #8f5b16;
}

.contact-view-switcher {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-soft);
}

.contact-view-switcher > strong {
  display: block;
  margin-bottom: 9px;
  font-size: var(--text-small);
}

.contact-view-switcher > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-view-switcher button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 800;
}

.contact-view-switcher button:not(:disabled):hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.contact-view-switcher button[aria-pressed=true] {
  border-color: var(--d2-brand);
  background: var(--d2-brand);
  color: #fff;
}

.contact-view-switcher button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.contact-view-switcher > p {
  margin: 9px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  line-height: 1.6;
}

.contact-page-groups {
  display: grid;
  gap: 26px;
}

.contact-page-groups.is-axis-view {
  gap: 14px;
}

.contact-axis-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-card);
}

.contact-axis-group-header {
  padding: 13px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--d2-soft);
}

.contact-axis-group-header > div:first-child {
  min-width: 0;
}

.contact-axis-kind {
  display: block;
  margin-bottom: 2px;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  font-weight: 700;
}

.contact-axis-group-header h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-body);
  line-height: 1.5;
}

.contact-axis-group-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.contact-axis-group.is-missing .contact-axis-group-header {
  background: #f0efec;
}

.contact-axis-association-list {
  display: grid;
}

.contact-axis-association {
  min-width: 0;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--d2-line);
}

.contact-axis-association-detail {
  min-width: 0;
}

.contact-axis-association-detail h4 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-small);
}

.contact-axis-association-detail p {
  margin: 3px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.contact-axis-association-detail .contact-axis-association-meta {
  color: #4f4b45;
  font-weight: 700;
}

.contact-axis-association-detail a {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-axis-association-detail a:hover {
  color: var(--d2-accent);
  text-decoration: underline;
}

.contact-axis-more-button {
  min-height: 42px;
  border: 1px solid var(--d2-brand);
  border-radius: 8px;
  background: var(--d2-card);
  color: var(--d2-accent);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 800;
}

.contact-axis-more-button:hover {
  background: var(--d2-brand);
  color: #fff;
}

.contact-page-group {
  min-width: 0;
  padding-top: 20px;
  border-top: 1px solid var(--d2-line-strong);
}

.contact-page-group-header {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.contact-page-group-header > div {
  min-width: 0;
}

.contact-page-group-header h3 {
  margin: 0 0 4px;
  overflow-wrap: anywhere;
  font-size: var(--text-body);
  line-height: 1.55;
}

.contact-page-group-header a {
  display: block;
  overflow: hidden;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-page-group-header a:hover {
  color: var(--d2-accent);
  text-decoration: underline;
}

.contact-page-count {
  flex: 0 0 auto;
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 800;
}

.contact-result-list {
  display: grid;
  gap: 14px;
}

.contact-result-card {
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-card);
}

.contact-result-card-header {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--d2-line);
  background: var(--d2-soft);
}

.contact-result-card-header h4 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-body);
}

.contact-result-card-header p {
  margin: 3px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.contact-result-card-header .contact-result-card-summary {
  color: #4f4b45;
  font-weight: 700;
}

.contact-result-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-result-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4f4b45;
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: 800;
}

.contact-result-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--d2-brand);
}

.contact-copy-button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 800;
  white-space: nowrap;
}

.contact-copy-button:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.contact-detail-toggle {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--d2-brand);
  border-radius: 7px;
  background: var(--d2-brand);
  color: #fff;
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 800;
  white-space: nowrap;
}

.contact-detail-toggle:hover {
  border-color: var(--d2-accent);
  background: var(--d2-accent);
}

.contact-result-card-body[hidden] {
  display: none;
}

.contact-value-list {
  margin: 0;
  padding: 4px 16px;
}

.contact-value-row {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(130px, 0.28fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--d2-line);
}

.contact-value-row:last-child {
  border-bottom: 0;
}

.contact-value-row dt {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.contact-value-row dd {
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow-wrap: anywhere;
  color: var(--d2-ink);
  font-size: var(--text-small);
  font-weight: 650;
}

.contact-value-row dd > span,
.contact-value-row dd > a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-value-row dd > a {
  color: var(--d2-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-value-row-static dd {
  justify-content: flex-start;
  color: var(--d2-muted);
}

.contact-phone-value {
  align-items: stretch !important;
  flex-direction: column;
  justify-content: center !important;
}

.contact-phone-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.contact-phone-details summary {
  width: max-content;
  color: var(--d2-muted);
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: 700;
}

.contact-phone-details > div {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--d2-soft);
}

.contact-phone-details p {
  margin: 0;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  font-size: var(--text-caption);
}

.contact-phone-details p + p {
  margin-top: 6px;
}

.contact-phone-details p > span {
  color: var(--d2-muted);
}

.contact-phone-details p > strong {
  overflow-wrap: anywhere;
}

.contact-source-details {
  padding: 0 16px 14px;
  border-top: 1px solid var(--d2-line);
}

.contact-source-details summary {
  width: max-content;
  padding-top: 12px;
  color: var(--d2-muted);
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: 700;
}

.contact-source-details div {
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--d2-soft);
}

.contact-source-details p {
  margin: 0;
  overflow-wrap: anywhere;
  color: #4f4b45;
  font-size: var(--text-caption);
  line-height: 1.7;
}

.contact-source-details p + p {
  margin-top: 5px;
}

.web-image-group-empty.is-error {
  color: #b42323;
}

@media (max-width: 1080px) {
  .web-image-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .web-image-result-toolbar,
  .web-image-usage-box {
    align-items: stretch;
    flex-direction: column;
  }
  .web-image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .web-image-progress-summary,
  .web-image-page-progress-row {
    grid-template-columns: 1fr;
  }
  .web-image-progress-summary output {
    text-align: left;
  }
  .web-image-page-progress-row {
    padding-block: 11px;
  }
  .web-image-page-state {
    padding-left: 38px;
  }
  .web-image-grid {
    grid-template-columns: 1fr;
  }
  .web-image-result-toolbar > div,
  .web-image-result-toolbar button {
    width: 100%;
  }
  .contact-page-group-header,
  .contact-axis-association,
  .contact-result-card-header,
  .contact-value-row {
    grid-template-columns: 1fr;
  }
  .contact-view-switcher > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-view-switcher button {
    width: 100%;
    padding-inline: 7px;
  }
  .contact-page-group-header {
    display: grid;
  }
  .contact-axis-group-header {
    align-items: stretch;
    flex-direction: column;
  }
  .contact-axis-group-actions,
  .contact-axis-association > .contact-copy-button {
    width: 100%;
  }
  .contact-axis-group-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .contact-result-card-actions,
  .contact-value-row dd,
  .contact-value-row dd > .contact-copy-button {
    width: 100%;
  }
  .contact-result-card-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .contact-result-card-actions button,
  .contact-phone-primary,
  .contact-phone-primary .contact-copy-button {
    width: 100%;
  }
  .contact-phone-primary {
    align-items: stretch;
    flex-direction: column;
  }
  .contact-phone-details p {
    grid-template-columns: 1fr;
  }
  .contact-value-row {
    padding: 10px 0;
    gap: 6px;
  }
  .contact-value-row dd {
    align-items: stretch;
    flex-direction: column;
  }
}
.tool-breadcrumb {
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.tool-breadcrumb a:hover {
  color: var(--d2-accent);
  text-decoration: underline;
}

.tool-breadcrumb strong {
  color: #4f4b45;
  font-weight: 600;
}

.tool-intro {
  padding-top: 48px;
  padding-bottom: 32px;
}

.tool-categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--d2-muted);
  font-size: 12px;
  font-weight: 600;
}

.tool-categories a {
  color: #4f4b45;
}

.tool-categories a:hover {
  color: var(--d2-accent);
  text-decoration: underline;
}

.tool-intro h1 {
  margin: 13px 0 8px;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.045em;
}

.tool-intro > p {
  margin: 0;
  color: var(--d2-muted);
  line-height: 1.8;
}

.tool-trust {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-trust span {
  padding: 6px 9px;
  border: 1px solid var(--d2-line);
  border-radius: 6px;
  background: var(--d2-card);
  color: #4f4b45;
  font-size: var(--text-caption);
  font-weight: 700;
}

.tool-workspace {
  margin-bottom: 70px;
}

.tool-workspace--framed {
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--d2-line);
  border-radius: 14px;
  background: var(--d2-card);
}

.tool-layout {
  display: grid;
  gap: 18px;
}

.tool-layout [hidden] {
  display: none !important;
}

.tool-panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--d2-line);
  border-radius: 11px;
  background: var(--d2-card);
}

.tool-panel-heading {
  margin-bottom: 22px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.tool-panel-heading h2 {
  margin: 0;
  font-size: 18px;
}

.tool-panel-heading p {
  margin: 3px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.tool-panel-heading > button {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font-size: var(--text-small);
}

.tool-panel-heading > button:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.tool-field {
  margin: 0;
  padding: 18px 0;
  display: block;
  border: 0;
  box-shadow: inset 0 1px 0 var(--d2-line);
}

fieldset.tool-field {
  min-width: 0;
}

fieldset.tool-field > .tool-field-heading {
  float: left;
}

fieldset.tool-field > .tool-field-heading + * {
  clear: both;
}

.tool-field-heading {
  width: 100%;
  margin-bottom: 9px;
  padding: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-small);
  font-weight: 700;
}

.tool-field-heading small {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 400;
}

.tool-step-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.tool-step-label > b {
  box-sizing: border-box;
  min-width: 61px;
  height: 27px;
  padding: 1px 8px 0;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--d2-brand);
  color: #fff;
  font: 800 var(--text-caption)/1 Arial, sans-serif;
}

.tool-step-label > b[data-password-leak-number],
.tool-step-label > b[data-password-leak-result-number] {
  width: 27px;
  min-width: 27px;
  padding-inline: 0;
}

.tool-choice {
  min-width: 0;
  position: relative;
  display: block;
  cursor: pointer;
}

.tool-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.tool-choice-content {
  min-width: 0;
  height: 100%;
  display: block;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.tool-choice:hover .tool-choice-content {
  border-color: var(--d2-brand);
}

.tool-choice > input:checked + .tool-choice-content {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  box-shadow: 0 0 0 2px rgb(var(--d2-brand-rgb)/8%);
}

.tool-choice > input:focus-visible + .tool-choice-content {
  outline: 3px solid rgb(var(--d2-brand-rgb)/18%);
  outline-offset: 2px;
}

.tool-choice-content--stacked {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.tool-choice-content--stacked strong {
  font-size: var(--text-small);
}

.tool-choice-content--stacked small {
  margin-top: 4px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

.tool-choice-grid {
  display: grid;
  gap: 12px 18px;
}

.tool-choice-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-choice-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-choice-grid > .tool-choice > .tool-choice-content {
  min-height: 70px;
  padding: 10px 12px;
}

.tool-choice-list > .tool-choice {
  min-height: 82px;
}

.tool-choice-list > .tool-choice + .tool-choice {
  margin-top: 9px;
}

.tool-choice-list > .tool-choice > .tool-choice-content {
  padding: 14px;
}

.tool-primary-button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: var(--d2-brand);
  color: #fff;
  font: inherit;
  font-size: var(--text-body);
  font-weight: 800;
}

.tool-primary-button:hover {
  background: var(--d2-brand-hover);
}

.tool-primary-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.tool-reset-button {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--d2-muted);
  font: inherit;
  font-size: var(--text-small);
  text-decoration: underline;
}

.tool-error {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid #f1b8b8;
  border-radius: 8px;
  background: #fff3f3;
  color: #b42323;
  font-size: var(--text-small);
  line-height: 1.6;
}

.tool-text-input {
  min-width: 0;
  width: 100%;
  height: 48px;
  padding: 0 13px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.4;
}

.tool-text-input:focus,
.tool-code-output:focus {
  border-color: var(--d2-brand);
  outline: 3px solid rgb(var(--d2-brand-rgb)/15%);
}

.tool-text-input::placeholder,
.tool-code-output::placeholder {
  color: var(--d2-muted);
  font-family: "M PLUS 1", sans-serif;
  font-weight: 400;
}

.tool-select-input {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font: inherit;
  font-size: var(--text-body);
  font-weight: 400;
}

.tool-select-input:focus {
  border-color: var(--d2-brand);
  outline: 3px solid rgb(var(--d2-brand-rgb)/15%);
}

.tool-code-output {
  width: 100%;
  padding: 15px;
  resize: vertical;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font: 700 var(--text-small)/1.75 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}

.tool-status {
  min-height: 18px;
  margin: 9px 0 0;
  color: #147a47;
  font-size: var(--text-small);
  line-height: 1.6;
  text-align: center;
}

.tool-file-dropzone {
  min-height: 220px;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--d2-line-strong);
  border-radius: 12px;
  background: var(--d2-soft);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tool-file-dropzone:hover,
.tool-file-dropzone:focus-within,
.tool-file-dropzone:focus-visible {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft);
  outline: none;
}

.tool-file-dropzone:focus-visible {
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/15%);
}

.tool-file-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.tool-file-upload-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--d2-accent-soft-strong);
  color: var(--d2-accent);
  font-size: 26px;
  font-weight: 700;
}

.tool-file-dropzone strong {
  margin-top: 17px;
  font-size: 16px;
}

.tool-file-dropzone small {
  margin-top: 6px;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.tool-file-dropzone button {
  margin-top: 20px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--d2-brand);
  color: #fff;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.tool-file-dropzone button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.tool-file-dropzone.is-dragging {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft);
  box-shadow: inset 0 0 0 2px rgb(var(--d2-brand-rgb)/12%);
}

.tool-file-dropzone.has-error {
  border-color: #d94a4a;
  background: #fffafa;
}

.tool-file-selection-error {
  position: relative;
  margin: 12px 0 0;
  padding: 13px 14px 13px 44px;
  border-color: #e29a9a;
  background: #fff0f0;
  color: #9f1b1b;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.65;
}

.tool-file-selection-error::before {
  content: "!";
  position: absolute;
  top: 13px;
  left: 14px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c93636;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.tool-file-privacy {
  margin: 15px 0 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
}

.tool-file-privacy span {
  color: var(--color-success);
  font-weight: 900;
}

.compression-tool {
  grid-template-columns: minmax(0, 1fr);
}

.compression-input-details {
  margin: 0 0 14px;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
}

.compression-selection-head {
  margin-top: 20px;
  padding-bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--d2-line);
}

.compression-selection-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.compression-selection-head strong {
  font-size: var(--text-small);
}

.compression-selection-head small {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.compression-selection-head button,
.compression-pagination button,
.tool-progress-meta button,
.compression-result-download {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.compression-selection-head button:hover,
.compression-pagination button:hover,
.tool-progress-meta button:hover,
.compression-result-download:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.compression-selection-head button:disabled,
.compression-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.compression-list-empty {
  min-height: 64px;
  margin: 0;
  display: grid;
  place-items: center;
  color: var(--d2-muted);
  font-size: var(--text-small);
  text-align: center;
}

.compression-file-list,
.compression-result-list {
  max-height: 520px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.compression-file-row,
.compression-result-row {
  min-height: 58px;
  padding: 10px 2px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--d2-line);
}

.compression-file-row {
  min-height: 76px;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
}

.compression-file-thumbnail {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-soft);
  color: var(--d2-muted);
}

.compression-file-thumbnail-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.compression-file-thumbnail-label {
  padding: 4px;
  font-size: var(--text-caption);
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.compression-file-thumbnail.is-unavailable {
  color: #8a5b5b;
}

.compression-file-main,
.compression-result-main {
  min-width: 0;
}

.compression-file-name,
.compression-result-name,
.compression-file-details,
.compression-result-details {
  display: block;
}

.compression-file-name,
.compression-result-name {
  overflow: hidden;
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compression-file-details,
.compression-result-details {
  margin-top: 4px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.compression-file-status {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.compression-file-row.is-processing .compression-file-status {
  color: var(--d2-accent);
}

.compression-file-row.is-done .compression-file-status {
  color: var(--color-success);
}

.compression-file-row.is-error .compression-file-status,
.compression-file-row.is-cancelled .compression-file-status {
  color: #b42323;
}

.compression-file-remove {
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--d2-muted);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.compression-file-remove:hover {
  color: #b42323;
  text-decoration: underline;
}

.compression-pagination {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.compression-pagination span {
  min-width: 55px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
  text-align: center;
}

.compression-field {
  padding-block: 19px;
}

.compression-field > .tool-field-heading {
  margin-bottom: 10px;
  font-size: var(--text-small);
}

.compression-field > .tool-field-heading strong {
  color: var(--d2-accent);
}

.compression-field select {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font: inherit;
  font-size: var(--text-body);
}

.compression-field select:focus {
  border-color: var(--d2-brand);
  outline: 3px solid rgb(var(--d2-brand-rgb)/15%);
}

.tool-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: #4f4b45;
  cursor: pointer;
}

.tool-toggle[hidden] {
  display: none;
}

.tool-toggle > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tool-toggle-track {
  position: relative;
  width: 48px;
  height: 26px;
  margin-top: 1px;
  display: block;
  border: 1px solid var(--d2-muted);
  border-radius: 999px;
  background: var(--d2-muted);
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tool-toggle-track::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 23, 23, 0.22);
  content: "";
  transition: transform 0.18s ease;
}

.tool-toggle > input:checked + .tool-toggle-track {
  border-color: var(--d2-brand);
  background: var(--d2-brand);
}

.tool-toggle > input:checked + .tool-toggle-track::after {
  transform: translateX(22px);
}

.tool-toggle > input:focus-visible + .tool-toggle-track {
  outline: 3px solid rgb(var(--d2-brand-rgb)/18%);
  outline-offset: 2px;
}

.tool-toggle > input:disabled + .tool-toggle-track,
.tool-toggle > input:disabled ~ .tool-toggle-copy {
  opacity: 0.5;
}

.tool-toggle-copy {
  min-width: 0;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
}

.tool-toggle-copy strong {
  color: var(--d2-ink);
  font-size: var(--text-small);
  line-height: 1.5;
}

.tool-toggle-copy small {
  margin-top: 3px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.tool-filename-suffix {
  margin-top: 13px;
  display: grid;
  gap: 7px;
}

.tool-filename-suffix label {
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.tool-filename-suffix input {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font: inherit;
  font-size: var(--text-body);
}

.tool-filename-suffix input:focus {
  border-color: var(--d2-brand);
  outline: 3px solid rgb(var(--d2-brand-rgb)/15%);
}

.tool-filename-example {
  margin-top: 8px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

.tool-filename-example strong {
  color: #4f4b45;
  font-weight: 700;
}

.tool-range {
  --tool-range-fill: 0%;
  width: 100%;
  height: 24px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tool-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right, var(--d2-brand) 0, var(--d2-brand) var(--tool-range-fill), var(--d2-muted) var(--tool-range-fill), var(--d2-muted) 100%);
}

.tool-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -5px;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid var(--d2-card);
  border-radius: 50%;
  background: var(--d2-brand);
  box-shadow: 0 0 0 1px var(--d2-brand);
}

.tool-range::-moz-range-track {
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--d2-muted);
}

.tool-range::-moz-range-progress {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--d2-brand);
}

.tool-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--d2-card);
  border-radius: 50%;
  background: var(--d2-brand);
  box-shadow: 0 0 0 1px var(--d2-brand);
}

.tool-range:focus-visible {
  outline: none;
}

.tool-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--d2-brand), 0 0 0 4px rgb(var(--d2-brand-rgb)/20%);
}

.tool-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--d2-brand), 0 0 0 4px rgb(var(--d2-brand-rgb)/20%);
}

.tool-range:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.compression-quality > .tool-field-heading strong {
  color: var(--d2-brand);
}

.compression-quality.is-disabled {
  color: var(--d2-muted);
}

.compression-quality > small {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.compression-output-note {
  margin-top: 7px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.65;
}

.image-converter-control {
  display: grid;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-converter-background {
  margin-top: 15px;
  display: grid;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
}

.image-converter-background > span:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image-converter-background input[type=color] {
  width: 52px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.image-converter-background:hover input[type=color] {
  border-color: var(--d2-brand);
}

.image-converter-background input[type=color]:focus-visible {
  border-color: var(--d2-brand);
  outline: 3px solid rgb(var(--d2-brand-rgb)/15%);
}

.image-converter-background strong {
  color: var(--d2-ink);
  font-size: var(--text-small);
}

.image-converter-background small {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.65;
}

.image-resizer-size-fields {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.image-resizer-size-fields > label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-resizer-size-fields > label > span:last-child {
  height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
}

.image-resizer-size-fields > label > span:last-child:focus-within {
  border-color: var(--d2-brand);
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/15%);
}

.image-resizer-size-fields input {
  min-width: 0;
  height: 100%;
  padding: 0 11px;
  border: 0;
  outline: 0;
  color: var(--d2-ink);
  font: 700 var(--text-body)/1 var(--font-ja);
}

.image-resizer-size-fields i {
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--d2-line);
  background: var(--d2-paper);
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-style: normal;
}

.image-resizer-enlarge {
  margin-top: 14px;
}

.image-splitter-tool {
  align-items: start;
}

.image-splitter-config-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(400px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 18px;
}

.image-splitter-selection-panel {
  grid-column: 1;
  grid-row: 1;
}

.image-splitter-preview-panel {
  min-height: 400px;
  grid-column: 2;
  grid-row: 1/span 2;
  position: sticky;
  top: 24px;
}

.image-splitter-settings-panel {
  grid-column: 1;
  grid-row: 2;
}

.image-splitter-selected {
  margin-top: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
}

.image-splitter-selected > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.image-splitter-selected strong,
.image-splitter-selected small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-splitter-selected small {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.image-splitter-selected button {
  flex: 0 0 auto;
}

.image-splitter-editor {
  display: grid;
  align-items: start;
}

.image-splitter-editor-empty {
  min-height: 270px;
  margin: 0;
  padding: 28px 18px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
  text-align: center;
}

.image-splitter-preview-column {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.image-splitter-preview-frame {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background-color: var(--d2-soft);
  background-image: linear-gradient(45deg, var(--d2-line) 25%, transparent 25%), linear-gradient(-45deg, var(--d2-line) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--d2-line) 75%), linear-gradient(-45deg, transparent 75%, var(--d2-line) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  line-height: 0;
}

.image-splitter-preview-frame > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.image-splitter-guide-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.image-splitter-exclusion {
  position: absolute;
  z-index: 1;
  display: block;
  background: rgba(23, 23, 23, 0.56);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.image-splitter-exclusion--top,
.image-splitter-exclusion--bottom {
  right: 0;
  left: 0;
  height: var(--exclusion-size);
}

.image-splitter-exclusion--top {
  top: 0;
}

.image-splitter-exclusion--bottom {
  bottom: 0;
}

.image-splitter-exclusion--left,
.image-splitter-exclusion--right {
  top: 0;
  bottom: 0;
  width: var(--exclusion-size);
}

.image-splitter-exclusion--left {
  left: 0;
}

.image-splitter-exclusion--right {
  right: 0;
}

.image-splitter-guide {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: none;
}

.image-splitter-guide::before {
  position: absolute;
  content: "";
  background: currentcolor;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.image-splitter-guide--horizontal {
  --image-splitter-guide-color: #e33d42;
  top: var(--guide-position);
  right: 0;
  left: 0;
  height: 28px;
  color: var(--image-splitter-guide-color);
  cursor: ns-resize;
  transform: translateY(-50%);
}

.image-splitter-guide--horizontal::before {
  top: 13px;
  right: 0;
  left: 0;
  height: 2px;
}

.image-splitter-guide--vertical {
  --image-splitter-guide-color: var(--d2-brand);
  top: 0;
  bottom: 0;
  left: var(--guide-position);
  width: 28px;
  color: var(--image-splitter-guide-color);
  cursor: ew-resize;
  transform: translateX(-50%);
}

.image-splitter-guide--vertical::before {
  top: 0;
  bottom: 0;
  left: 13px;
  width: 2px;
}

.image-splitter-guide:hover::before,
.image-splitter-guide.is-selected::before,
.image-splitter-guide:focus-visible::before {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px currentcolor;
}

.image-splitter-guide:focus-visible {
  outline: 0;
}

.image-splitter-guide-label {
  position: absolute;
  z-index: 1;
  min-width: max-content;
  height: 24px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  background: var(--image-splitter-guide-color);
  color: #fff;
  font: 800 12px/1 var(--font-ja);
  white-space: nowrap;
  box-shadow: 0 1px 5px rgba(23, 23, 23, 0.3);
  pointer-events: none;
}

.image-splitter-guide--vertical .image-splitter-guide-label {
  color: #fff;
}

.image-splitter-guide-grip {
  width: 10px;
  height: 14px;
  flex: 0 0 auto;
  background-image: radial-gradient(circle, currentcolor 1.3px, transparent 1.5px);
  background-size: 5px 5px;
}

.image-splitter-guide--horizontal .image-splitter-guide-label {
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
}

.image-splitter-guide--vertical .image-splitter-guide-label {
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
}

.image-splitter-guide:disabled {
  cursor: wait;
}

.image-splitter-guide-status {
  min-height: 22px;
  margin: 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.65;
  text-align: center;
}

.image-splitter-controls {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.image-splitter-count-grid,
.image-splitter-output-grid,
.image-splitter-adjustment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.image-splitter-count-grid > label,
.image-splitter-output-grid > label,
.image-splitter-adjustment-grid > label,
.image-splitter-pixel-input {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-splitter-output-grid small {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.55;
}

.image-splitter-output-grid .is-disabled {
  color: var(--d2-muted);
}

.image-splitter-exclusions {
  min-width: 0;
  margin: 0;
  padding: 13px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
}

.image-splitter-exclusions > legend {
  padding: 0 5px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 800;
}

.image-splitter-exclusions > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.image-splitter-exclusions label {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-splitter-exclusions label > span:last-child,
.image-splitter-pixel-input > span:last-child {
  height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
}

.image-splitter-exclusions label > span:last-child:focus-within,
.image-splitter-pixel-input > span:last-child:focus-within {
  border-color: var(--d2-brand);
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/15%);
}

.image-splitter-exclusions input,
.image-splitter-pixel-input input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 9px;
  border: 0;
  outline: 0;
  color: var(--d2-ink);
  font: 700 var(--text-small)/1 var(--font-ja);
}

.image-splitter-exclusions i,
.image-splitter-pixel-input i {
  height: 100%;
  padding: 0 8px;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--d2-line);
  background: var(--d2-paper);
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-style: normal;
}

.image-splitter-exclusions > small {
  margin-top: 9px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.image-splitter-segment-summary {
  margin: 0;
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--d2-soft);
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.6;
}

.image-splitter-color-field {
  margin-top: 14px;
}

.image-splitter-adjustment-toggle {
  margin-top: 16px;
  border-radius: 8px;
  background: var(--d2-card);
}

.image-splitter-adjustment-toggle .tool-toggle-copy strong {
  font-size: var(--text-body);
}

.image-splitter-adjustment-fields {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
}

.image-splitter-custom-ratio {
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.image-splitter-custom-ratio label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-splitter-custom-ratio input {
  width: 100%;
  height: 42px;
  padding: 0 9px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  color: var(--d2-ink);
  font: 700 var(--text-small)/1 var(--font-ja);
}

.image-splitter-custom-ratio i {
  padding-bottom: 12px;
  color: var(--d2-muted);
  font-style: normal;
  font-weight: 800;
}

.image-splitter-settings-error {
  margin-top: 14px;
}

.image-splitter-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.image-splitter-result-row {
  min-height: 76px;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
}

.image-renamer-layout {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.image-renamer-controls-column {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.image-renamer-results-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 18px;
}

.image-renamer-list-field {
  padding-bottom: 0;
}

.image-renamer-list-field .compression-selection-head {
  margin-top: 0;
}

.image-renamer-save-field {
  padding: 0;
  box-shadow: none;
}

.image-renamer-file-list {
  max-height: none;
  overflow: visible;
}

.image-renamer-order-toolbar {
  margin: 12px 0 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.image-renamer-order-toolbar > span,
.image-renamer-order-toolbar > small {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.image-renamer-order-toolbar > span {
  margin-right: 2px;
  font-weight: 700;
}

.image-renamer-order-toolbar > small {
  margin-left: auto;
}

.image-renamer-order-toolbar button,
.image-renamer-row-actions button,
.image-renamer-group-member button,
.image-renamer-group-clear,
.image-renamer-secondary-button,
.image-renamer-zip-progress > button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-renamer-order-toolbar button:hover,
.image-renamer-row-actions button:hover,
.image-renamer-group-member button:hover,
.image-renamer-secondary-button:hover,
.image-renamer-zip-progress > button:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.image-renamer-order-toolbar button.is-active {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
}

.image-renamer-file-row {
  min-height: 104px;
  padding: 11px 2px;
  display: grid;
  grid-template-columns: 30px 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--d2-line);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.image-renamer-file-row.is-drop-target,
.image-renamer-group-member.is-drop-target {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft);
}

.image-renamer-file-row.has-error {
  background: #fff8f8;
}

.image-renamer-drag-handle,
.image-renamer-group-drag {
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--d2-muted);
  font: 900 17px/1 Arial, sans-serif;
  letter-spacing: -3px;
  cursor: grab;
}

.image-renamer-drag-handle:active,
.image-renamer-group-drag:active {
  cursor: grabbing;
}

.image-renamer-drag-handle:focus-visible,
.image-renamer-group-drag:focus-visible {
  border-radius: 4px;
  outline: 3px solid rgb(var(--d2-brand-rgb)/18%);
}

.image-renamer-drag-icon {
  width: 15px;
  height: 12px;
  margin: 0 auto;
  display: block;
  position: relative;
}

.image-renamer-drag-icon::before {
  width: 100%;
  height: 2px;
  position: absolute;
  top: 1px;
  left: 0;
  border-radius: 999px;
  background: currentcolor;
  box-shadow: 0 4px 0 currentcolor, 0 8px 0 currentcolor;
  content: "";
}

.image-renamer-file-main {
  min-width: 0;
}

.image-renamer-name-line {
  min-width: 0;
}

.image-renamer-output-link {
  display: block;
  color: var(--d2-accent);
  font-size: var(--text-small);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.image-renamer-output-link:hover {
  color: var(--d2-accent-dark);
}

.image-renamer-output-link:focus-visible {
  border-radius: 3px;
  outline: 3px solid rgb(var(--d2-brand-rgb)/18%);
}

.image-renamer-output-link[aria-disabled] {
  color: #b42323;
  cursor: not-allowed;
  text-decoration: none;
}

.image-renamer-file-details,
.image-renamer-item-error {
  margin-top: 4px;
  display: block;
  font-size: var(--text-caption);
  line-height: 1.5;
}

.image-renamer-file-details {
  color: var(--d2-muted);
}

.image-renamer-item-error {
  color: #b42323;
  font-weight: 700;
}

.image-renamer-individual-editor {
  margin-top: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.image-renamer-individual-editor input,
.image-renamer-auto-grid input,
.image-renamer-auto-grid select,
.image-renamer-bulk-names textarea,
.image-renamer-group-settings input,
.image-renamer-group-settings select,
.image-renamer-group-transfer {
  min-width: 0;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font: inherit;
  font-size: var(--text-small);
}

.image-renamer-individual-editor input {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border-radius: 7px 0 0 7px;
}

.image-renamer-individual-editor > span:last-child {
  height: 34px;
  padding: 0 8px;
  display: grid;
  align-items: center;
  border: 1px solid var(--d2-line-strong);
  border-left: 0;
  border-radius: 0 7px 7px 0;
  background: var(--d2-soft);
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.image-renamer-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.image-renamer-row-actions button {
  min-height: 28px;
  padding-inline: 7px;
  font-size: var(--text-caption);
}

.image-renamer-tool.is-saving .image-renamer-row-actions button,
.image-renamer-tool.is-saving .image-renamer-drag-handle,
.image-renamer-tool.is-saving .image-renamer-group-member button,
.image-renamer-tool.is-saving .image-renamer-remove-group {
  pointer-events: none;
  opacity: 0.45;
}

.image-renamer-row-actions .image-renamer-row-remove:hover,
.image-renamer-group-member .image-renamer-group-member-remove:hover,
.image-renamer-group-clear:hover,
.image-renamer-remove-group:hover,
.image-renamer-zip-progress > button:hover {
  border-color: #b42323;
  color: #b42323;
}

.image-renamer-mode-tabs {
  margin-bottom: 0;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border-radius: 9px;
  background: var(--d2-soft);
}

.image-renamer-mode-tabs button {
  min-width: 0;
  min-height: 40px;
  padding: 7px 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 800;
}

.image-renamer-mode-tabs button[aria-selected=true] {
  border-color: var(--d2-line);
  background: var(--d2-card);
  color: var(--d2-accent);
  box-shadow: 0 1px 3px rgba(85, 70, 54, 0.1);
}

.image-renamer-mode-panel {
  width: 100%;
  min-width: 0;
  clear: both;
}

.image-renamer-mode-field .tool-field-heading {
  margin-bottom: 12px;
}

.image-renamer-auto-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.image-renamer-auto-grid label,
.image-renamer-group-settings label,
.image-renamer-bulk-names {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-renamer-auto-grid input,
.image-renamer-auto-grid select,
.image-renamer-group-settings input,
.image-renamer-group-settings select {
  width: 100%;
  height: 40px;
  padding: 0 9px;
}

.image-renamer-individual-editor input:focus,
.image-renamer-auto-grid input:focus,
.image-renamer-auto-grid select:focus,
.image-renamer-bulk-names textarea:focus,
.image-renamer-group-settings input:focus,
.image-renamer-group-settings select:focus,
.image-renamer-group-transfer:focus {
  border-color: var(--d2-brand);
  outline: 3px solid rgb(var(--d2-brand-rgb)/15%);
}

.image-renamer-auto-grid input[aria-invalid=true] {
  border-color: #b42323;
  background: #fff8f8;
}

.image-renamer-start-error {
  margin-top: 10px;
}

.image-renamer-preview {
  margin-top: 13px;
  padding: 11px 12px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
}

.image-renamer-preview strong,
.image-renamer-preview div {
  display: block;
  font-size: var(--text-small);
}

.image-renamer-preview div {
  margin-top: 4px;
  color: var(--d2-accent);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.image-renamer-bulk-names textarea {
  width: 100%;
  padding: 10px;
  resize: vertical;
  line-height: 1.55;
}

.image-renamer-secondary-button {
  margin-top: 10px;
}

.image-renamer-mode-panel > small {
  margin-top: 9px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.image-renamer-group-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.image-renamer-group-actions .image-renamer-secondary-button {
  margin-top: 0;
}

.image-renamer-group-clear {
  border-color: #dfb4b4;
  color: #a33131;
}

.image-renamer-group-help {
  margin: 10px 0;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  line-height: 1.6;
}

.image-renamer-groups {
  display: grid;
  gap: 10px;
}

.image-renamer-group-empty {
  min-height: 100px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 1px dashed var(--d2-line-strong);
  border-radius: 8px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  text-align: center;
}

.image-renamer-group-card {
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-card);
}

.image-renamer-group-card.is-drop-target {
  border-color: var(--d2-brand);
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/13%);
}

.image-renamer-group-card-heading {
  padding: 10px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 8px;
  background: var(--d2-accent-soft);
}

.image-renamer-group-card-heading strong {
  overflow: hidden;
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-renamer-group-card-heading span,
.image-renamer-group-card-heading small {
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.image-renamer-group-card-heading small {
  grid-column: 1/-1;
  overflow-wrap: anywhere;
}

.image-renamer-group-settings {
  border-bottom: 1px solid var(--d2-line);
}

.image-renamer-group-settings summary {
  padding: 8px 11px;
  color: #4f4b45;
  font-size: var(--text-caption);
  font-weight: 700;
  cursor: pointer;
}

.image-renamer-group-settings-grid {
  padding: 2px 11px 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-renamer-group-add-images {
  padding: 11px;
  border-bottom: 1px solid var(--d2-line);
  background: var(--d2-accent-soft);
}

.image-renamer-group-add-heading {
  margin: 0 0 10px;
}

.image-renamer-group-dropzone {
  min-height: 190px;
  padding: 20px 16px;
  border-radius: 9px;
}

.image-renamer-group-dropzone .tool-file-upload-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 23px;
}

.image-renamer-group-dropzone strong {
  margin-top: 13px;
}

.image-renamer-group-dropzone button {
  margin-top: 15px;
}

.image-renamer-group-dropzone[aria-disabled=true] {
  cursor: not-allowed;
  opacity: 0.65;
}

.image-renamer-group-upload-error {
  margin-top: 10px;
}

.image-renamer-remove-group {
  margin: 0 11px 11px;
  padding: 6px 9px;
  border: 1px solid #dfb4b4;
  border-radius: 7px;
  background: var(--d2-card);
  color: #a33131;
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 700;
}

.image-renamer-group-member-heading {
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--d2-line);
  color: #4f4b45;
  font-size: var(--text-small);
}

.image-renamer-group-member-step {
  min-width: 25px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  background: var(--d2-brand);
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

.image-renamer-group-members {
  max-height: 230px;
  margin: 0;
  padding: 7px;
  overflow: auto;
  list-style: none;
}

.image-renamer-group-member {
  min-height: 42px;
  padding: 5px;
  display: grid;
  grid-template-columns: 25px 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--d2-line);
}

.image-renamer-group-thumbnail {
  width: 36px;
  height: 36px;
}

.image-renamer-group-member:last-child {
  border-bottom: 0;
}

.image-renamer-group-member.has-error {
  background: #fff5f5;
}

.image-renamer-group-member > span {
  min-width: 0;
}

.image-renamer-group-member-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.image-renamer-group-member-actions .image-renamer-group-transfer {
  width: min(150px, 24vw);
  height: 32px;
  padding: 0 7px;
  font-size: var(--text-caption);
}

.image-renamer-group-member small,
.image-renamer-group-member strong {
  display: block;
  overflow: hidden;
  font-size: var(--text-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-renamer-group-member small {
  color: var(--d2-muted);
}

.image-renamer-group-member strong {
  margin-top: 2px;
  color: var(--d2-accent);
}

.image-renamer-group-member .image-renamer-group-drag {
  width: 25px;
  min-height: 32px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--d2-muted);
}

.image-renamer-group-member-actions button {
  height: 32px;
  min-height: 32px;
  padding-inline: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-caption);
  line-height: 1;
  white-space: nowrap;
}

.image-renamer-group-list-empty {
  min-height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--d2-line);
  border-radius: 6px;
  background: var(--d2-card);
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.image-renamer-group-selection-error {
  margin-top: 12px;
}

.image-renamer-group-privacy {
  margin-top: 12px;
}

.image-renamer-summary {
  margin: 0 0 13px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--d2-line);
  border-radius: 8px;
}

.image-renamer-summary > div {
  padding: 10px;
  border-right: 1px solid var(--d2-line);
}

.image-renamer-summary > div:last-child {
  border-right: 0;
}

.image-renamer-summary dt,
.image-renamer-summary dd {
  margin: 0;
  text-align: center;
}

.image-renamer-summary dt {
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.image-renamer-summary dd {
  margin-top: 3px;
  font-size: var(--text-small);
  font-weight: 800;
}

.image-renamer-settings-error {
  margin: 0 0 12px;
}

.image-renamer-download-all {
  width: 100%;
}

.image-renamer-save-note {
  margin-top: 9px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.6;
  text-align: center;
}

.image-renamer-zip-progress {
  margin-top: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.image-renamer-zip-progress > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.image-renamer-zip-progress progress {
  width: 100%;
}

.image-renamer-zip-progress strong {
  min-width: 90px;
  font-size: var(--text-caption);
  text-align: right;
}

.image-renamer-download-status.is-error {
  color: #b42323;
}

.compression-start {
  width: 100%;
  margin-top: 18px;
}

.compression-resource-note {
  margin: 10px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.65;
  text-align: center;
}

.compression-tool-error,
.compression-progress-panel,
.compression-results-panel {
  grid-column: 1/-1;
}

.compression-tool-error {
  margin: 0;
}

.tool-progress-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.tool-progress-line progress {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--d2-soft);
}

.tool-progress-line progress::-webkit-progress-bar {
  background: var(--d2-soft);
}

.tool-progress-line progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--d2-brand);
}

.tool-progress-line progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--d2-brand);
}

.tool-progress-line strong {
  min-width: 82px;
  font-size: var(--text-small);
  text-align: right;
}

.tool-progress-meta {
  margin-top: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.tool-progress-meta > span {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.tool-progress-meta > div {
  display: flex;
  gap: 8px;
}

.tool-progress-meta [data-cancel]:hover,
.tool-progress-meta [data-video-cancel]:hover,
.tool-progress-meta [data-image-converter-cancel]:hover,
.tool-progress-meta [data-image-resizer-cancel]:hover,
.tool-progress-meta [data-image-splitter-cancel]:hover {
  border-color: #b42323;
  color: #b42323;
}

.compression-summary {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--d2-line);
  border-radius: 9px;
}

.image-converter-summary,
.image-resizer-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.compression-summary > div {
  padding: 12px;
  border-right: 1px solid var(--d2-line);
}

.compression-summary > div:last-child {
  border-right: 0;
}

.compression-summary dt {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.compression-summary dd {
  margin: 5px 0 0;
  font-size: var(--text-body);
  font-weight: 800;
}

.compression-summary dd.is-larger {
  color: #9a5b00;
}

.compression-result-list {
  max-height: 650px;
  border-top: 1px solid var(--d2-line);
}

.compression-result-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding-inline: 8px;
}

.image-converter-result-row,
.image-resizer-result-row {
  min-height: 76px;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
}

.compression-result-details.is-error,
.compression-result-badge.is-error {
  color: #b42323;
}

.compression-result-badge {
  padding: 5px 7px;
  border-radius: 5px;
  background: var(--d2-soft);
  color: #4f4b45;
  font-size: var(--text-caption);
  font-weight: 800;
  white-space: nowrap;
}

.compression-result-badge.is-smaller {
  background: #eaf8f0;
  color: #147a47;
}

.compression-result-badge.is-larger {
  background: #fff6e8;
  color: #9a5b00;
}

.compression-result-actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.compression-result-actions > button {
  min-width: 220px;
}

.compression-download-status.is-error {
  color: #b42323;
}

.video-converter-tool {
  grid-template-columns: minmax(0, 1fr);
}

.video-selection-head {
  margin-top: 20px;
  padding-bottom: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--d2-line);
}

.video-selection-head > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.video-selection-head strong,
.video-selection-head small {
  font-size: var(--text-small);
}

.video-selection-head small {
  color: var(--d2-muted);
}

.video-selection-head button,
.video-batch-pagination button,
.video-batch-secondary-action,
.video-batch-download,
.video-batch-release {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.video-selection-head button:hover,
.video-batch-pagination button:hover,
.video-batch-secondary-action:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.video-selection-head button:disabled,
.video-batch-pagination button:disabled,
.video-batch-remove:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.video-list-empty {
  min-height: 64px;
  margin: 0;
  display: grid;
  place-items: center;
  color: var(--d2-muted);
  font-size: var(--text-small);
  text-align: center;
}

.video-batch-file-list,
.video-batch-result-list {
  max-height: 520px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.video-batch-file-row,
.video-batch-result-row {
  min-height: 86px;
  padding: 11px 2px;
  display: grid;
  grid-template-areas: "thumbnail main status actions" "preview preview preview preview";
  grid-template-columns: 112px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--d2-line);
}

.video-batch-file-row.is-result-status-hidden {
  grid-template-areas: "thumbnail main actions" "preview preview preview";
  grid-template-columns: 112px minmax(0, 1fr) auto;
}

.video-batch-thumbnail {
  grid-area: thumbnail;
  width: 112px;
  aspect-ratio: 16/9;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-soft);
  color: var(--d2-muted);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 800;
}

button.video-batch-thumbnail {
  cursor: pointer;
}

button.video-batch-thumbnail:hover,
button.video-batch-thumbnail:focus-visible {
  border-color: var(--d2-brand);
  outline: 0;
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/15%);
}

.video-batch-thumbnail-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-batch-thumbnail-placeholder {
  padding: 4px;
  line-height: 1.25;
  text-align: center;
}

.video-batch-thumbnail-placeholder::before {
  margin-bottom: 3px;
  display: block;
  color: var(--d2-muted);
  content: "▶";
  font-size: 17px;
  line-height: 1;
}

.video-batch-thumbnail.is-audio .video-batch-thumbnail-placeholder::before {
  content: "♪";
  font-size: 20px;
}

.video-batch-file-main,
.video-batch-result-main {
  grid-area: main;
  min-width: 0;
}

.video-batch-file-name,
.video-batch-result-name,
.video-batch-file-details,
.video-batch-result-details,
.video-batch-result-released {
  display: block;
}

.video-batch-file-name,
.video-batch-result-name {
  overflow: hidden;
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-batch-file-details,
.video-batch-result-details,
.video-batch-result-released {
  margin-top: 4px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.video-batch-result-released {
  color: #8a5a18;
  font-weight: 700;
}

.video-batch-file-status,
.video-batch-result-status {
  grid-area: status;
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
  white-space: nowrap;
}

.video-batch-file-row.is-processing .video-batch-file-status,
.video-batch-result-row.is-processing .video-batch-result-status {
  color: var(--d2-accent);
}

.video-batch-file-row.is-done .video-batch-file-status,
.video-batch-result-row.is-done .video-batch-result-status {
  color: var(--color-success);
}

.video-batch-file-row.is-error .video-batch-file-status,
.video-batch-file-row.is-cancelled .video-batch-file-status,
.video-batch-result-row.is-error .video-batch-result-status,
.video-batch-result-row.is-cancelled .video-batch-result-status {
  color: #b42323;
}

.video-batch-file-actions,
.video-batch-result-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.video-batch-remove {
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--d2-muted);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.video-batch-remove:hover,
.video-batch-release:hover {
  border-color: #b42323;
  color: #b42323;
}

.video-batch-download {
  border-color: var(--d2-brand);
  background: var(--d2-brand);
  color: #fff;
}

.video-batch-download:hover {
  border-color: var(--d2-brand-hover);
  background: var(--d2-brand-hover);
}

.video-batch-pagination {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.video-batch-pagination span {
  min-width: 55px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
  text-align: center;
}

.video-batch-item-error {
  margin: 6px 0 0;
  color: #b42323;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.55;
}

.video-file-summary {
  margin-top: 18px;
  padding: 0 2px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid var(--d2-line);
}

.video-file-summary > div {
  min-width: 0;
}

.video-file-summary strong,
.video-file-summary small {
  display: block;
}

.video-file-summary strong {
  overflow: hidden;
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-file-summary small {
  margin-top: 4px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.video-file-summary button {
  min-height: 32px;
  padding: 0 11px;
  flex: 0 0 auto;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  color: var(--d2-muted);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.video-file-summary button:hover {
  border-color: #b42323;
  color: #b42323;
}

.video-source-duration-warning {
  position: relative;
  margin: 12px 0 0;
  padding: 13px 14px 13px 44px;
  border: 1px solid #e0b768;
  border-radius: 8px;
  background: #fff8eb;
  color: #6f4a19;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.65;
}

.video-source-duration-warning::before {
  content: "!";
  position: absolute;
  top: 13px;
  left: 14px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #b87512;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.video-source-preview {
  min-height: 260px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--d2-soft);
}

.video-preview-name {
  padding: 11px 14px;
  overflow: hidden;
  border-bottom: 1px solid var(--d2-line);
  background: var(--d2-card);
  font-size: var(--text-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-source-preview video {
  width: 100%;
  max-height: 430px;
  display: block;
  background: var(--d2-ink);
}

.video-source-preview p {
  align-self: center;
  max-width: 430px;
  margin: 0;
  padding: 24px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
  text-align: center;
}

.video-field {
  padding-block: 18px;
}

.video-input-details {
  margin: 0 0 14px;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
}

.video-input-details > span,
.video-input-details > small {
  display: block;
}

.video-input-details strong {
  color: #4f4b45;
}

.video-input-details > small {
  margin-top: 3px;
  color: var(--d2-muted);
  font-size: inherit;
}

.video-time-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.video-time-inputs > label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.video-number-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
}

.video-number-input:focus-within {
  border-color: var(--d2-brand);
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/15%);
}

.video-number-input .tool-text-input {
  height: 42px;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.video-number-input i {
  padding-right: 12px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-style: normal;
  font-weight: 600;
}

.video-field-note {
  margin-top: 7px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.65;
}

.video-format-description {
  min-height: 22px;
}

.video-trim-filename-settings .tool-filename-example {
  overflow-wrap: anywhere;
}

.video-size-controls {
  display: grid;
  gap: 12px;
}

.video-size-controls > label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.video-webp-quality > small {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.video-webp-quality .tool-field-heading strong {
  color: var(--d2-brand);
}

.video-frame-estimate {
  margin: 15px 0 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.6;
  text-align: center;
}

.video-frame-estimate.is-error {
  color: #b42323;
  font-weight: 600;
}

.video-convert-button {
  margin-top: 12px;
}

.video-engine-note {
  margin: 10px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.65;
  text-align: center;
}

.video-tool-error,
.video-operation-status,
.video-progress-panel,
.video-result-panel {
  grid-column: 1/-1;
}

.video-tool-error {
  margin: 0;
}

.video-operation-status {
  margin: 0;
}

.video-batch-result-summary {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--d2-line);
  border-radius: 8px;
}

.video-batch-result-summary > div {
  padding: 12px;
  border-right: 1px solid var(--d2-line);
  text-align: center;
}

.video-batch-result-summary > div:last-child {
  border-right: 0;
}

.video-batch-result-summary dt {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.video-batch-result-summary dd {
  margin: 4px 0 0;
  font-size: var(--text-body);
  font-weight: 800;
}

.video-batch-result-preview {
  min-height: 220px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  border: 1px solid var(--d2-line);
}

.video-batch-result-preview video {
  margin-inline: auto;
}

.video-batch-result-preview audio {
  align-self: center;
  margin: 30px;
}

.video-bulk-download-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.video-bulk-download-actions[hidden] {
  display: none;
}

.video-bulk-download-actions > button {
  min-width: 220px;
}

.video-bulk-download-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.video-result-panel > .tool-reset-button {
  margin-top: 16px;
}

.video-download-status.is-error {
  color: #b42323;
}

.video-result-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 0.85fr);
  align-items: start;
  gap: 26px;
}

.video-result-preview {
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: var(--d2-card);
}

.video-result-preview img {
  max-width: 100%;
  max-height: 520px;
  display: block;
  object-fit: contain;
}

.video-format-result-preview video {
  width: 100%;
  max-height: 520px;
  display: block;
  background: var(--d2-ink);
}

.video-format-result-preview audio {
  width: min(100%, 520px);
}

.video-format-result-preview p {
  max-width: 480px;
  margin: 0;
  padding: 28px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
  text-align: center;
}

.video-inline-preview {
  grid-area: preview;
  width: 100%;
  min-height: 0;
  margin: 4px 0 2px;
  padding-top: 13px;
  display: flex;
  place-items: initial;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--d2-line);
  border-radius: 0;
  background: transparent;
}

.video-inline-preview[hidden] {
  display: none;
}

.video-inline-preview .video-preview-name {
  padding: 0 0 10px;
  border: 0;
  background: transparent;
}

.video-inline-preview video {
  border-radius: 8px;
}

.video-inline-preview audio {
  width: min(100%, 520px);
  margin: 22px auto 8px;
}

.video-result-information {
  min-width: 0;
}

.video-result-name {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--text-body);
}

.video-result-summary {
  margin: 14px 0 20px;
}

.video-result-summary > div {
  padding: 9px 0;
  display: grid;
  grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--d2-line);
}

.video-result-summary dt {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.video-result-summary dd {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 800;
  text-align: right;
}

.video-audio-mode-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.video-audio-mode-buttons button {
  min-height: 76px;
  padding: 12px 15px;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 9px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  text-align: center;
}

.video-audio-mode-buttons button:hover {
  border-color: var(--d2-brand);
}

.video-audio-mode-buttons button[aria-pressed=true] {
  border-color: var(--d2-brand);
  background: rgb(var(--d2-brand-rgb)/9%);
  box-shadow: inset 0 0 0 1px var(--d2-brand);
  color: var(--d2-accent);
}

.video-audio-mode-buttons button:focus-visible {
  outline: 3px solid rgb(var(--d2-brand-rgb)/20%);
  outline-offset: 2px;
}

.video-audio-mode-buttons strong,
.video-audio-mode-buttons small {
  display: block;
}

.video-audio-mode-buttons strong {
  font-size: var(--text-small);
}

.video-audio-mode-buttons small {
  color: var(--d2-muted);
  font-size: var(--text-caption);
  line-height: 1.5;
}

.video-audio-range-field {
  margin-top: 16px;
}

.video-audio-range-heading {
  display: block;
  color: #4f4b45;
  font-size: var(--text-small);
}

.video-audio-range-description {
  margin: 4px 0 10px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.video-audio-current-time-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.video-audio-current-time-actions[hidden] {
  display: none;
}

.video-audio-remover-tool .video-source-preview .video-audio-current-time-actions {
  margin-top: 10px;
}

.video-audio-current-time-actions button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.video-audio-current-time-actions button:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.video-audio-range-error {
  margin: 10px 0 0;
}

.video-audio-range-status {
  margin: 10px 0 0;
}

.video-audio-editor-settings {
  padding: 14px;
  border-top: 1px solid var(--d2-line);
  background: var(--d2-card);
}

.video-audio-editor-settings[hidden] {
  display: none;
}

.video-audio-editor-settings .video-audio-range-heading {
  margin-bottom: 9px;
}

.video-audio-editor-settings .video-time-inputs {
  max-width: 520px;
}

.video-audio-editor-settings .video-field-note {
  margin-top: 9px;
}

.video-audio-editor-settings .video-audio-range-error {
  max-width: none;
  margin: 10px 0 0;
  padding: 12px 14px;
  align-self: stretch;
  color: #b42323;
}

.video-audio-editor-settings .video-audio-range-status {
  max-width: none;
  margin: 10px 0 0;
  padding: 0;
  align-self: stretch;
  color: #147a47;
  text-align: left;
}

.video-audio-inline-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 18px;
}

.video-audio-inline-preview-media {
  min-width: 0;
}

.video-audio-inline-preview-media video {
  max-height: 430px;
  object-fit: contain;
}

.video-audio-inline-step {
  min-width: 0;
  margin: 0;
  padding: 14px;
  align-self: start;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-card);
}

.video-audio-inline-step .tool-field-heading {
  width: 100%;
  margin: 0 0 13px;
  padding: 0;
}

.video-audio-inline-step .video-audio-range-field {
  margin-top: 13px;
}

.video-audio-inline-step .video-audio-editor-settings {
  padding: 0;
  border: 0;
}

.video-audio-inline-step .video-audio-current-time-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.video-audio-inline-step .video-audio-current-time-actions button {
  min-width: 0;
  padding-inline: 6px;
}

.video-audio-item-note {
  margin: 6px 0 0;
  color: #8a5a18;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.55;
}

.video-audio-file-row,
.video-audio-result-row {
  grid-template-areas: "main status actions";
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.video-audio-file-row.has-preview {
  grid-template-areas: "main status actions" "preview preview preview";
}

.video-audio-file-row.is-no-audio .video-batch-file-status {
  color: #8a5a18;
}

.video-audio-file-list {
  max-height: none;
  overflow: visible;
}

.video-audio-result-list {
  max-height: 620px;
}

.video-audio-remover-tool .video-batch-result-preview {
  border: 1px solid var(--d2-line);
}

.video-volume-edit-description {
  margin: 0 0 14px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.video-volume-file-list {
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  list-style: none;
}

.video-volume-file-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-card);
}

.video-volume-file-card.is-error {
  border-color: rgba(180, 35, 35, 0.35);
}

.video-volume-file-header {
  padding: 13px 14px;
  display: grid;
  grid-template-areas: "main status remove";
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--d2-line);
}

.video-volume-file-header .video-batch-remove {
  grid-area: remove;
}

.video-volume-file-card:not(:has(.video-volume-file-editor:not([hidden]))) .video-volume-file-header {
  border-bottom: 0;
}

.video-volume-file-editor {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(300px, 0.9fr);
  align-items: start;
  gap: 20px;
}

.video-volume-file-editor[hidden] {
  display: none;
}

.video-volume-preview-column,
.video-volume-settings {
  min-width: 0;
}

.video-volume-preview-host {
  min-height: 148px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: #171717;
}

.video-volume-preview-host video {
  width: 100%;
  max-height: 390px;
  display: block;
  object-fit: contain;
}

.video-volume-preview-host audio {
  width: min(100% - 28px, 520px);
  margin: 38px 14px;
}

.video-volume-preview-error,
.video-volume-preview-note {
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.video-volume-preview-error {
  margin: 9px 0 0;
  color: #b42323;
  font-weight: 600;
}

.video-volume-preview-note {
  margin-top: 8px;
  display: block;
}

.video-volume-settings {
  margin: 0;
  padding: 15px;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
}

.video-volume-settings-heading {
  padding: 0 5px;
  color: var(--d2-ink);
  font-size: var(--text-body);
  font-weight: 800;
}

.video-volume-range-label {
  margin-top: 3px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: 12px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.video-volume-range {
  width: 100%;
  height: 24px;
  margin: 13px 0 9px;
  accent-color: var(--d2-brand);
  cursor: pointer;
}

.video-volume-range:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.video-volume-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.video-volume-presets button {
  min-width: 0;
  min-height: 36px;
  padding: 7px 5px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 750;
}

.video-volume-presets button:hover {
  border-color: var(--d2-brand);
}

.video-volume-presets button[aria-pressed=true] {
  border-color: var(--d2-brand);
  background: var(--d2-brand);
  color: #fff;
}

.video-volume-presets button:focus-visible {
  outline: 3px solid rgb(var(--d2-brand-rgb)/20%);
  outline-offset: 2px;
}

.video-volume-limiter {
  margin-top: 14px;
}

.video-volume-limiter[hidden] {
  display: none;
}

.video-volume-limiter .tool-toggle-copy small {
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  font-weight: 500;
}

.video-volume-setting-note {
  margin: 10px 0 0;
  font-size: var(--text-small);
  line-height: 1.6;
}

.video-volume-setting-note {
  color: var(--d2-muted);
}

.video-volume-setting-note.is-warning {
  color: #b42323;
  font-weight: 650;
}

.video-volume-result-row {
  grid-template-areas: "main status actions";
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.video-volume-result-list {
  max-height: 620px;
}

.video-volume-result-media {
  display: grid;
  place-items: center;
}

.video-volume-result-media video {
  width: 100%;
  max-height: 520px;
  display: block;
  background: var(--d2-ink);
}

.video-volume-result-media audio {
  width: min(100% - 32px, 520px);
  margin: 30px 16px;
}

.video-trim-file-list {
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  list-style: none;
}

.video-trim-file-editor {
  grid-template-columns: minmax(280px, 1.05fr) minmax(330px, 0.95fr);
}

.video-trim-settings {
  min-width: 0;
}

.video-trim-timeline {
  --trim-start: 0%;
  --trim-end: 100%;
  position: relative;
  height: 34px;
  margin: 7px 8px 5px;
}

.video-trim-timeline::before,
.video-trim-timeline::after {
  content: "";
  position: absolute;
  top: 15px;
  height: 5px;
  border-radius: 999px;
}

.video-trim-timeline::before {
  right: 0;
  left: 0;
  background: #d8d3ca;
}

.video-trim-timeline::after {
  right: calc(100% - var(--trim-end));
  left: var(--trim-start);
  background: var(--d2-brand);
}

.video-trim-range {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 34px;
  margin: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.video-trim-range--end {
  z-index: 3;
}

.video-trim-range::-webkit-slider-runnable-track {
  height: 5px;
  background: transparent;
}

.video-trim-range::-moz-range-track {
  height: 5px;
  background: transparent;
}

.video-trim-range::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--d2-brand);
  box-shadow: 0 0 0 1px var(--d2-brand), 0 2px 5px rgba(0, 0, 0, 0.18);
  cursor: grab;
  pointer-events: auto;
}

.video-trim-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--d2-brand);
  box-shadow: 0 0 0 1px var(--d2-brand), 0 2px 5px rgba(0, 0, 0, 0.18);
  cursor: grab;
  pointer-events: auto;
}

.video-trim-range:focus-visible {
  outline: none;
}

.video-trim-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgb(var(--d2-brand-rgb)/22%);
}

.video-trim-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgb(var(--d2-brand-rgb)/22%);
}

.video-trim-range:disabled::-webkit-slider-thumb,
.video-trim-range:disabled::-moz-range-thumb {
  cursor: not-allowed;
  opacity: 0.55;
}

.video-trim-time-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.video-trim-time-field {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.video-trim-time-field input {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.video-trim-selected-duration {
  margin: 9px 0 0;
  color: var(--d2-ink);
  font-size: var(--text-small);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.video-trim-range-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.video-trim-range-actions button {
  min-width: 0;
}

.video-trim-output-field,
.video-trim-track-field {
  margin-top: 16px;
}

.video-trim-output-formats {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.video-trim-format-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
}

.video-trim-format-field[hidden] {
  display: none;
}

.video-trim-format-field select {
  width: 100%;
}

.video-trim-output-note {
  margin: 8px 0 0;
  line-height: 1.6;
}

.video-trim-track-field {
  display: grid;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
}

.video-trim-track-field[hidden] {
  display: none;
}

.video-trim-range-error {
  margin: 12px 0 0;
}

.video-trim-filename-settings {
  margin-top: 20px;
}

.video-trim-result-row {
  grid-template-areas: "main status actions";
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.video-trim-result-list {
  max-height: 620px;
}

.image-ocr-tool {
  grid-template-columns: minmax(0, 1fr);
}

.image-ocr-language-field .tool-select-input {
  max-width: 420px;
}

.image-ocr-field-note,
.image-ocr-engine-note {
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.image-ocr-field-note {
  margin-top: 8px;
}

.image-ocr-space-toggle {
  max-width: 620px;
  margin-top: 14px;
}

.image-ocr-preview {
  margin-top: 20px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 20px;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-card);
}

.image-ocr-preview-frame {
  min-height: 180px;
  max-height: 340px;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #e2ddd4;
  border-radius: 8px;
  background: linear-gradient(45deg, var(--d2-soft) 25%, transparent 25%) 0 0/18px 18px, linear-gradient(-45deg, var(--d2-soft) 25%, transparent 25%) 0 9px/18px 18px, linear-gradient(45deg, transparent 75%, var(--d2-soft) 75%) 9px -9px/18px 18px, linear-gradient(-45deg, transparent 75%, var(--d2-soft) 75%) -9px 0/18px 18px, #fff;
}

.image-ocr-preview-frame img {
  max-width: 100%;
  max-height: 340px;
  display: block;
  object-fit: contain;
}

.image-ocr-file-information {
  min-width: 0;
}

.image-ocr-file-information > strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--text-body);
}

.image-ocr-file-information dl {
  margin: 14px 0 16px;
}

.image-ocr-file-information dl > div {
  padding: 8px 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--d2-line);
}

.image-ocr-file-information dt {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.image-ocr-file-information dd {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 800;
  text-align: right;
}

.image-ocr-secondary-button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-ocr-secondary-button:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.image-ocr-secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.image-ocr-ready-status {
  min-height: 24px;
  margin: 18px 0 10px;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
  text-align: center;
}

.image-ocr-ready-status.is-success {
  color: var(--color-success);
}

.image-ocr-ready-status.is-error,
.image-ocr-result-status.is-error {
  color: var(--color-error);
}

.image-ocr-result-status.is-success {
  color: var(--color-success);
}

.image-ocr-run {
  width: 100%;
}

.image-ocr-engine-note {
  margin: 10px auto 0;
  text-align: center;
}

.image-ocr-tool-error {
  margin: 0;
}

.image-ocr-progress-panel,
.image-ocr-result-panel {
  grid-column: 1/-1;
}

.tool-progress-meta [data-image-ocr-cancel]:hover {
  border-color: #b42323;
  color: #b42323;
}

.image-ocr-text-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-ocr-text {
  width: 100%;
  min-height: 320px;
  padding: 15px;
  resize: vertical;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font: 400 var(--text-body)/1.75 var(--font-ja);
}

.image-ocr-text:focus {
  border-color: var(--d2-brand);
  outline: 3px solid rgb(var(--d2-brand-rgb)/15%);
}

.image-ocr-result-meta {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
}

.image-ocr-result-meta > div {
  padding: 12px 14px;
  border-right: 1px solid var(--d2-line);
}

.image-ocr-result-meta > div:last-child {
  border-right: 0;
}

.image-ocr-result-meta dt {
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.image-ocr-result-meta dd {
  margin: 3px 0 0;
  font-size: var(--text-body);
  font-weight: 800;
}

.image-ocr-result-actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.image-ocr-result-actions > button {
  width: 100%;
}

.image-ocr-result-status {
  text-align: left;
}

.image-ocr-tool.is-processing .tool-file-dropzone,
.image-ocr-tool.is-inspecting .tool-file-dropzone,
.tool-file-dropzone[aria-disabled=true] {
  cursor: wait;
  opacity: 0.7;
}

.image-background-remover-tool {
  grid-template-columns: minmax(0, 1fr);
}

.image-background-remover-selected {
  margin-top: 16px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-card);
}

.image-background-remover-selected > div {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.image-background-remover-selected strong {
  overflow-wrap: anywhere;
  font-size: var(--text-small);
}

.image-background-remover-selected small {
  margin-top: 3px;
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.image-background-remover-selected-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-background-remover-selection-field.is-complete > .compression-input-details,
.image-background-remover-selection-field.is-complete > .tool-file-dropzone,
.image-background-remover-selection-field.is-complete > .tool-file-privacy {
  display: none;
}

.image-background-remover-selection-field.is-complete .image-background-remover-selected {
  margin-top: 0;
}

.image-background-remover-selected button,
.image-background-remover-edit-actions button {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-background-remover-selected button:hover,
.image-background-remover-edit-actions button:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.image-background-remover-selected button:disabled,
.image-background-remover-edit-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.image-background-remover-step-copy {
  margin: 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
}

.image-background-remover-step-summary {
  margin: 0;
  color: #147a47;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-background-remover-step-change {
  min-height: 34px;
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 700;
}

.image-background-remover-step-change:hover:not(:disabled) {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.image-background-remover-step-change:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.image-background-remover-refinement-actions button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 800;
}

.image-background-remover-refinement-actions button:hover:not(:disabled),
.image-background-remover-refinement-actions button[aria-pressed=true] {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  box-shadow: 0 0 0 2px rgb(var(--d2-brand-rgb)/8%);
}

.image-background-remover-refinement-actions button[data-image-background-remover-mode=keep][aria-pressed=true] {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.09);
}

.image-background-remover-refinement-actions button[data-image-background-remover-mode=remove][aria-pressed=true] {
  border-color: #dc2626;
  background: #fef2f2;
  color: #b91c1c;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.08);
}

.image-background-remover-refinement-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.image-background-remover-refinement-actions {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-background-remover-step-next {
  max-width: 340px;
  margin: 14px 0 0 auto;
  display: block;
}

.image-background-remover-settings {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.image-background-remover-settings--background {
  width: 100%;
  max-width: 380px;
  grid-template-columns: minmax(0, 1fr);
}

.image-background-remover-settings--refinement {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.image-background-remover-settings label {
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: #4f4b45;
  font-size: var(--text-caption);
  font-weight: 700;
}

.image-background-remover-settings output {
  color: var(--d2-brand);
  font-weight: 900;
}

.image-background-remover-settings input[type=range] {
  width: 100%;
  margin: 4px 0 0;
  grid-column: 1/-1;
}

.image-background-remover-edit-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.image-background-remover-preview-field .image-background-remover-edit-actions {
  margin-top: 0;
}

.image-background-remover-preview-field.is-confirming .image-background-remover-edit-actions,
.image-background-remover-preview-field.is-confirming .image-background-remover-workbench figure:first-child {
  display: none;
}

.image-background-remover-preview-field.is-confirming .image-background-remover-workbench {
  grid-template-columns: minmax(0, 1fr);
}

.image-background-remover-workbench {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.image-background-remover-workbench figure {
  min-width: 0;
  margin: 0;
}

.image-background-remover-workbench figcaption {
  margin-bottom: 7px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.image-background-remover-workbench figcaption strong {
  color: var(--d2-ink);
  font-size: var(--text-small);
}

.image-background-remover-workbench figcaption small {
  color: var(--d2-muted);
  font-size: var(--text-caption);
  text-align: right;
}

.image-background-remover-canvas-frame {
  min-height: 320px;
  padding: 10px;
  display: grid;
  place-items: center;
  overflow: auto;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-soft);
}

.image-background-remover-canvas-frame--result {
  background: linear-gradient(45deg, var(--d2-line) 25%, transparent 25%) 0 0/20px 20px, linear-gradient(-45deg, var(--d2-line) 25%, transparent 25%) 0 10px/20px 20px, linear-gradient(45deg, transparent 75%, var(--d2-line) 75%) 10px -10px/20px 20px, linear-gradient(-45deg, transparent 75%, var(--d2-line) 75%) -10px 0/20px 20px, #fff;
}

.image-background-remover-canvas-frame canvas {
  max-width: 100%;
  max-height: 620px;
  display: block;
  object-fit: contain;
}

.image-background-remover-canvas-frame--editor canvas {
  cursor: default;
  touch-action: none;
}

.image-background-remover-canvas-frame--editor canvas[data-mode=background],
.image-background-remover-canvas-frame--editor canvas[data-mode=remove] {
  cursor: crosshair;
}

.image-background-remover-canvas-frame--editor canvas[data-mode=keep] {
  cursor: cell;
}

.image-background-remover-status {
  min-height: 24px;
  margin: 13px 0 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
  text-align: center;
}

.image-background-remover-status.is-success {
  color: var(--color-success);
}

.image-background-remover-status.is-warning {
  color: #9a6700;
}

.image-background-remover-status.is-error {
  color: var(--color-error);
}

.image-background-remover-engine-note {
  margin: 5px auto 0;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  line-height: 1.7;
  text-align: center;
}

.image-background-remover-summary {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
}

.image-background-remover-summary > div {
  padding: 12px 14px;
  border-right: 1px solid var(--d2-line);
}

.image-background-remover-summary > div:last-child {
  border-right: 0;
}

.image-background-remover-summary dt {
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.image-background-remover-summary dd {
  margin: 3px 0 0;
  font-size: var(--text-body);
  font-weight: 800;
}

.image-background-remover-download {
  width: 100%;
}

.image-background-remover-error {
  margin: 0;
}

.image-color-picker-tool {
  grid-template-columns: minmax(0, 1fr);
}

.image-color-picker-selected {
  margin-top: 16px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-card);
}

.image-color-picker-selected > div:first-child {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.image-color-picker-selected > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-color-picker-selected strong {
  overflow-wrap: anywhere;
  font-size: var(--text-small);
}

.image-color-picker-selected small {
  margin-top: 3px;
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.image-color-picker-selection-field.is-complete > .compression-input-details,
.image-color-picker-selection-field.is-complete > .tool-file-dropzone,
.image-color-picker-selection-field.is-complete > .tool-file-privacy,
.image-color-picker-selection-field.is-complete > .image-color-picker-load-status {
  display: none;
}

.image-color-picker-selection-field.is-complete .image-color-picker-selected {
  margin-top: 0;
}

.image-color-picker-selected button,
.image-color-picker-zoom button,
.tool-color-values button {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-color-picker-selected button:hover:not(:disabled),
.image-color-picker-zoom button:hover:not(:disabled),
.tool-color-values button:hover:not(:disabled) {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.image-color-picker-selected button:focus-visible,
.image-color-picker-zoom button:focus-visible,
.tool-color-values button:focus-visible,
.image-color-picker-preview-frame:focus-visible {
  outline: 3px solid rgb(var(--d2-brand-rgb)/20%);
  outline-offset: 2px;
}

.image-color-picker-selected button:disabled,
.image-color-picker-zoom button:disabled,
.tool-color-values button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.image-color-picker-load-status {
  min-height: 0;
  margin: 10px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  text-align: center;
}

.image-color-picker-load-status:empty {
  display: none;
}

.image-color-picker-workbench {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(310px, 0.85fr);
  align-items: start;
  gap: 18px;
}

.image-color-picker-workbench > .tool-field {
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-card);
}

.image-color-picker-result-field {
  max-height: calc(100vh - 36px);
  position: sticky;
  top: 18px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.image-color-picker-zoom {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.image-color-picker-zoom button {
  min-height: 40px;
}

.image-color-picker-zoom button:first-child,
.image-color-picker-zoom button:nth-child(3) {
  width: 42px;
  padding: 6px;
  font-size: var(--text-h3);
  line-height: 1;
}

.image-color-picker-zoom button.is-active {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
}

.image-color-picker-zoom output {
  min-width: 68px;
  color: var(--d2-ink);
  font-size: var(--text-small);
  font-weight: 800;
  text-align: center;
}

.image-color-picker-preview-help {
  margin: 11px 0 0;
  color: #4f4b45;
  font-size: var(--text-caption);
  line-height: 1.7;
}

.image-color-picker-preview-frame {
  height: clamp(380px, 62vh, 680px);
  margin-top: 12px;
  position: relative;
  overflow: auto;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: linear-gradient(45deg, var(--d2-line) 25%, transparent 25%) 0 0/20px 20px, linear-gradient(-45deg, var(--d2-line) 25%, transparent 25%) 0 10px/20px 20px, linear-gradient(45deg, transparent 75%, var(--d2-line) 75%) 10px -10px/20px 20px, linear-gradient(-45deg, transparent 75%, var(--d2-line) 75%) -10px 0/20px 20px, var(--d2-card);
  overscroll-behavior: contain;
}

.image-color-picker-preview-scroll {
  width: max-content;
  min-width: 100%;
  height: max-content;
  min-height: 100%;
  padding: 18px;
  box-sizing: border-box;
}

.image-color-picker-preview-stage {
  margin: 0 auto;
  position: relative;
}

.image-color-picker-preview-stage img {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  image-rendering: auto;
  touch-action: none;
  user-select: none;
}

.image-color-picker-marker {
  width: 18px;
  height: 18px;
  position: absolute;
  z-index: 2;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--d2-accent), 0 2px 7px rgba(23, 23, 23, 0.45);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.image-color-picker-loupe {
  width: 154px;
  padding: 7px;
  position: absolute;
  z-index: 4;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 10px;
  background: var(--d2-card);
  box-shadow: 0 7px 22px rgba(23, 23, 23, 0.28), 0 0 0 1px rgba(23, 23, 23, 0.25);
  pointer-events: none;
}

.image-color-picker-loupe canvas {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--d2-line);
  image-rendering: pixelated;
}

.image-color-picker-loupe strong {
  padding: 7px 4px 2px;
  display: block;
  color: var(--d2-ink);
  font-size: var(--text-small);
  letter-spacing: 0.02em;
  text-align: center;
}

.image-color-picker-preview-status {
  min-height: 24px;
  margin: 10px 0 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
  text-align: center;
}

.image-color-picker-result-empty {
  margin: 14px 0 0;
  padding: 14px;
  border: 1px dashed var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
  text-align: center;
}

.image-color-picker-result {
  margin-top: 14px;
}

.image-color-picker-result > header {
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-card);
}

.image-color-picker-result > header > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.image-color-picker-result > header small,
.image-color-picker-result > header span:last-child {
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.image-color-picker-result > header strong {
  margin: 1px 0;
  color: var(--d2-ink);
  font-size: var(--text-h3);
  overflow-wrap: anywhere;
}

.image-color-picker-current-swatch {
  flex: none;
  overflow: hidden;
  border: 1px solid var(--d2-line);
  background: linear-gradient(45deg, var(--d2-line) 25%, transparent 25%) 0 0/12px 12px, linear-gradient(-45deg, var(--d2-line) 25%, transparent 25%) 0 6px/12px 12px, linear-gradient(45deg, transparent 75%, var(--d2-line) 75%) 6px -6px/12px 12px, linear-gradient(-45deg, transparent 75%, var(--d2-line) 75%) -6px 0/12px 12px, #fff;
}

.image-color-picker-current-swatch {
  width: 58px;
  height: 58px;
  border-radius: 9px;
}

.image-color-picker-current-swatch i {
  width: 100%;
  height: 100%;
  display: block;
}

.tool-color-values {
  margin: 12px 0 0;
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
}

.tool-color-values > div {
  min-height: 48px;
  padding: 7px 8px 7px 12px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--d2-line);
}

.tool-color-values > div:last-child {
  border-bottom: 0;
}

.tool-color-values dt {
  color: var(--d2-muted);
  font-size: var(--text-caption);
  font-weight: 800;
  white-space: nowrap;
}

.tool-color-values dd {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.tool-color-values code {
  min-width: 0;
  color: var(--d2-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-caption);
  overflow-wrap: anywhere;
}

.tool-color-values button {
  min-width: 58px;
  min-height: 34px;
  padding: 5px 9px;
  font-size: var(--text-caption);
}

.tool-color-values button.is-copied {
  border-color: #86c7a1;
  background: #f0fdf4;
  color: #166534;
}

.tool-color-values button.is-copy-error {
  border-color: #f1a7a7;
  background: #fff5f5;
  color: #b42318;
}

.image-color-picker-hsb-note,
.image-color-picker-cmyk-note {
  margin-top: 7px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  line-height: 1.6;
}

.image-color-picker-cmyk-note {
  margin-top: 2px;
}

.image-color-picker-tool-error {
  margin: 0;
}

.image-color-picker-tool.is-inspecting .tool-file-dropzone {
  cursor: wait;
  opacity: 0.7;
}

.color-code-converter {
  grid-template-columns: minmax(0, 1fr);
}

.color-code-overview {
  margin-top: 13px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-soft);
}

.color-code-current {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.color-code-current > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.color-code-current small {
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.color-code-current strong {
  margin-top: 2px;
  color: var(--d2-ink);
  font: 800 var(--text-h3)/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-wrap: anywhere;
}

.color-code-current-swatch {
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--d2-line-strong);
  border-radius: 10px;
  background: linear-gradient(45deg, var(--d2-line) 25%, transparent 25%) 0 0/16px 16px, linear-gradient(-45deg, var(--d2-line) 25%, transparent 25%) 0 8px/16px 16px, linear-gradient(45deg, transparent 75%, var(--d2-line) 75%) 8px -8px/16px 16px, linear-gradient(-45deg, transparent 75%, var(--d2-line) 75%) -8px 0/16px 16px, #fff;
}

.color-code-current-swatch i {
  width: 100%;
  height: 100%;
  display: block;
  background: #007a00;
}

.color-code-native-picker {
  position: relative;
  flex: 0 0 auto;
}

.color-code-native-picker .tool-primary-button {
  width: auto;
  min-width: 190px;
  padding-inline: 17px;
}

.color-code-native-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.color-code-format-tabs {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.color-code-format-tabs button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 800;
}

.color-code-format-tabs button:hover {
  border-color: var(--d2-brand);
}

.color-code-format-tabs button[aria-selected=true] {
  border-color: var(--d2-brand);
  background: var(--d2-brand);
  color: #fff;
}

.color-code-format-tabs button:focus-visible,
.color-code-presets button:focus-visible,
.color-code-background-controls input[type=color]:focus-visible {
  outline: 3px solid rgb(var(--d2-brand-rgb)/20%);
  outline-offset: 2px;
}

.color-code-input-panels {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-card);
}

.color-code-input-panels [hidden] {
  display: none;
}

.color-code-hex-field,
.color-code-channel,
.color-code-opacity {
  display: grid;
  gap: 7px;
}

.color-code-hex-field > span:first-child,
.color-code-channel > span:first-child,
.color-code-opacity > span:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.color-code-hex-field strong,
.color-code-channel strong,
.color-code-opacity strong {
  color: #4f4b45;
  font-size: var(--text-small);
}

.color-code-hex-field small,
.color-code-channel small,
.color-code-opacity small {
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.color-code-hex-field .tool-text-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.02em;
}

.color-code-channel-grid {
  display: grid;
  gap: 12px;
}

.color-code-channel-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.color-code-channel-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.color-code-channel > input,
.color-code-number-control {
  width: 100%;
  height: 46px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
}

.color-code-channel > input {
  padding: 0 12px;
  color: var(--d2-ink);
  font: 700 var(--text-body)/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.color-code-number-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.color-code-number-control input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 5px 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--d2-ink);
  font: 700 var(--text-body)/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.color-code-number-control i {
  padding: 0 12px 0 4px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-style: normal;
  font-weight: 700;
}

.color-code-channel > input:focus,
.color-code-number-control:focus-within {
  border-color: var(--d2-brand);
  outline: 3px solid rgb(var(--d2-brand-rgb)/15%);
}

.color-code-channel > input[aria-invalid=true],
.color-code-number-control:has(input[aria-invalid=true]),
.color-code-hex-field input[aria-invalid=true] {
  border-color: #c93636;
  outline-color: rgba(201, 54, 54, 0.16);
}

.color-code-opacity {
  max-width: 280px;
  margin-top: 16px;
}

.color-code-presets {
  min-width: 0;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}

.color-code-presets legend {
  margin-bottom: 8px;
  padding: 0;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 800;
}

.color-code-presets > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.color-code-presets button {
  min-width: 0;
  min-height: 48px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 700;
}

.color-code-presets button:hover,
.color-code-presets button[aria-pressed=true] {
  border-color: var(--d2-brand);
}

.color-code-presets button[aria-pressed=true] {
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  box-shadow: 0 0 0 2px rgb(var(--d2-brand-rgb)/8%);
}

.color-code-presets i {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--d2-line-strong);
  border-radius: 6px;
}

.color-code-input-error {
  margin-top: 16px;
}

.color-code-privacy {
  margin: 15px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.65;
}

.color-code-privacy span {
  color: var(--color-success);
  font-weight: 900;
}

.color-code-result-group {
  margin-top: 14px;
}

.color-code-result-group + .color-code-result-group {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--d2-line);
}

.color-code-result-group-heading {
  margin: 0 0 8px;
  color: var(--d2-ink);
  font-size: var(--text-body);
  font-weight: 800;
  line-height: 1.5;
}

.color-code-result-status {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #e29a9a;
  border-radius: 8px;
  background: #fff0f0;
  color: #9f1b1b;
  font-size: var(--text-small);
  font-weight: 600;
}

.color-code-values {
  margin-top: 13px;
}

.color-code-values.is-stale {
  opacity: 0.52;
}

.color-code-result-note {
  margin-top: 7px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  line-height: 1.6;
}

.color-code-result-note + .color-code-result-note {
  margin-top: 2px;
}

.color-code-contrast-help {
  margin: 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
}

.color-code-background-controls {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-soft);
}

.color-code-background-controls > p:first-child {
  margin: 0 0 10px;
  color: #4f4b45;
  font-size: var(--text-caption);
  line-height: 1.65;
}

.color-code-background-controls > div {
  display: grid;
  grid-template-columns: minmax(0, 320px) 48px;
  align-items: end;
  gap: 10px;
}

.color-code-background-controls label {
  display: grid;
  gap: 6px;
}

.color-code-background-controls label > span {
  color: #4f4b45;
  font-size: var(--text-caption);
  font-weight: 700;
}

.color-code-background-controls input[type=text] {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.color-code-background-controls input[type=color] {
  width: 48px;
  height: 48px;
  padding: 3px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
  cursor: pointer;
}

.color-code-background-controls input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-code-background-controls input[type=color]::-webkit-color-swatch {
  border: 0;
  border-radius: 5px;
}

.color-code-background-controls .tool-error {
  margin-top: 10px;
}

.color-code-contrast-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.color-code-contrast-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-card);
}

.color-code-contrast-sample {
  min-height: 86px;
  padding: 16px;
  display: grid;
  place-items: center;
  background: #007a00;
  font-size: var(--text-body);
  font-weight: 800;
  text-align: center;
}

.color-code-contrast-card--white .color-code-contrast-sample {
  color: #fff;
}

.color-code-contrast-card--black .color-code-contrast-sample {
  color: #000;
}

.color-code-contrast-card header {
  padding: 12px 14px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-code-contrast-card header strong {
  font-size: var(--text-small);
}

.color-code-contrast-card header span {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--d2-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.color-code-contrast-card header b {
  margin-left: auto;
  font: 800 var(--text-body)/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.color-code-contrast-card ul {
  margin: 0;
  padding: 0 14px 13px;
  list-style: none;
}

.color-code-contrast-card li {
  padding: 5px 0;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  font-weight: 700;
}

.color-code-contrast-card li.is-pass {
  color: var(--color-success);
}

.color-code-contrast-card li.is-fail {
  color: var(--color-error);
}

.discount-calculator {
  grid-template-columns: 0.9fr 1.1fr;
}

.discount-panel {
  min-height: 400px;
}

.discount-rate-unit-options {
  max-width: 240px;
  margin-bottom: 10px;
}

.tool-choice-grid > .tool-choice > .discount-rate-unit-option {
  min-height: 42px;
  padding: 9px 10px;
  display: grid;
  place-items: center;
  font-size: var(--text-small);
  font-weight: 800;
}

.discount-input-wrap {
  height: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
}

.discount-input-wrap:focus-within {
  border-color: var(--d2-brand);
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/15%);
}

.discount-input-wrap input {
  min-width: 0;
  height: 100%;
  padding: 0 13px;
  border: 0;
  outline: 0;
  color: var(--d2-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.discount-input-wrap input::placeholder {
  color: var(--d2-muted);
  font-weight: 400;
}

.discount-input-wrap > span {
  height: 100%;
  padding: 0 13px;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--d2-line);
  background: var(--d2-paper);
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.discount-presets {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.discount-presets button {
  min-height: 34px;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.discount-presets button:hover,
.discount-presets button[aria-pressed=true] {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
}

.discount-field-note {
  margin-top: 8px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.discount-panel > .tool-primary-button {
  margin-top: 4px;
}

.discount-result-panel {
  background: var(--d2-card);
}

.discount-total {
  min-height: 162px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--d2-accent-soft);
  color: var(--d2-accent-dark);
  text-align: center;
}

.discount-total > span {
  font-size: var(--text-small);
  font-weight: 700;
}

.discount-total strong {
  margin-top: 6px;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.2;
  letter-spacing: -0.045em;
}

.discount-total small {
  margin-top: 7px;
  font-size: var(--text-small);
}

.discount-breakdown {
  margin: 18px 0 0;
  border-top: 1px solid var(--d2-line);
}

.discount-breakdown > div {
  padding: 12px 3px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--d2-line);
}

.discount-breakdown dt {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.discount-breakdown dd {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 800;
}

.discount-breakdown .is-saving {
  color: #147a47;
}

.discount-rounding {
  margin: 12px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.discount-empty-result {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--d2-muted);
  text-align: center;
}

.discount-empty-result > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--d2-accent-soft-strong);
  color: var(--d2-accent);
  font-size: 23px;
  font-weight: 900;
}

.discount-empty-result strong {
  margin-top: 18px;
  color: #4f4b45;
  font-size: 14px;
}

.discount-empty-result p {
  max-width: 280px;
  margin: 7px 0 0;
  font-size: var(--text-small);
  line-height: 1.7;
}

.password-generator {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.password-settings-panel,
.password-result-panel {
  align-self: start;
}

.password-character-options label,
.password-prefix-types label,
.password-symbol-options label {
  position: relative;
  cursor: pointer;
}

.password-character-options input,
.password-prefix-types input,
.password-symbol-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.password-character-options strong {
  font-size: var(--text-small);
}

.password-character-options small {
  margin-top: 4px;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.password-character-options input:checked + span,
.password-prefix-types input:checked + span,
.password-symbol-options input:checked + span {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
}

.password-character-options input:focus-visible + span,
.password-prefix-types input:focus-visible + span,
.password-symbol-options input:focus-visible + span {
  outline: 3px solid rgb(var(--d2-brand-rgb)/18%);
  outline-offset: 2px;
}

.password-character-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}

.password-character-options label > span {
  min-height: 54px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
}

.password-symbol-options,
.password-prefix-options {
  margin-top: 10px;
  padding: 13px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
}

.password-symbol-options > span {
  display: block;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.password-symbol-options > div {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
  gap: 5px;
}

.password-symbol-options label > span {
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--d2-line);
  border-radius: 6px;
  background: var(--d2-card);
  font: 700 var(--text-small)/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.password-number-input {
  width: 100%;
  height: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
}

.password-number-input:focus-within {
  border-color: var(--d2-brand);
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/15%);
}

.password-number-input input {
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  border: 0;
  outline: 0;
  color: var(--d2-ink);
  font: inherit;
  font-size: var(--text-body);
  font-weight: 700;
}

.password-number-input > span {
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--d2-line);
  background: var(--d2-paper);
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.password-presets {
  max-width: 310px;
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.password-presets button,
.password-results-head button,
.password-result-list button {
  min-height: 34px;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.password-presets button:hover,
.password-presets button[aria-pressed=true],
.password-results-head button:hover,
.password-result-list button:hover {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
}

.password-prefix-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.password-prefix-types label > span {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  font-size: var(--text-small);
  font-weight: 700;
}

.password-prefix-length {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.password-prefix-length .password-number-input {
  width: 118px;
  height: 38px;
}

.password-require-fieldset {
  padding-bottom: 7px;
}

.password-preset-summary {
  min-height: 112px;
  margin: 18px 0;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #e3a094;
  border-radius: 9px;
  background: var(--d2-accent-soft);
}

.password-preset-summary > span {
  width: 44px;
  height: 44px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  background: var(--d2-brand);
  color: #fff;
  font-size: var(--text-caption);
  font-weight: 800;
}

.password-preset-summary strong {
  font-size: var(--text-body);
}

.password-preset-summary p {
  margin: 5px 0 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.6;
}

.password-count-note {
  margin-top: 8px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.password-form-actions {
  margin-top: 4px;
}

.password-empty-result {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--d2-muted);
  text-align: center;
}

.password-empty-result > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--d2-accent-soft-strong);
  color: var(--d2-accent);
  font-size: var(--text-caption);
  font-weight: 900;
}

.password-empty-result strong {
  margin-top: 18px;
  color: #4f4b45;
  font-size: 14px;
}

.password-empty-result p {
  max-width: 280px;
  margin: 7px 0 0;
  font-size: var(--text-small);
  line-height: 1.7;
}

.password-results-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.password-results-head p {
  margin: 0;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.password-results-head > div {
  display: flex;
  gap: 6px;
}

.password-results-head button {
  padding: 0 10px;
}

.password-result-list {
  max-height: 520px;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  list-style: none;
}

.password-result-list li {
  min-height: 48px;
  padding: 7px 8px 7px 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--d2-line);
}

.password-result-list li:last-child {
  border-bottom: 0;
}

.password-result-list li > span {
  color: var(--d2-muted);
  font: 700 var(--text-caption)/1 Arial, sans-serif;
}

.password-result-list code {
  min-width: 0;
  overflow-x: auto;
  color: var(--d2-ink);
  font: 700 14px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap;
  user-select: all;
}

.password-result-list button {
  min-height: 30px;
  padding: 0 9px;
}

.htpasswd-generator,
.htaccess-generator {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.auth-file-panel {
  align-self: start;
}

.htpasswd-field-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.htpasswd-field-control > input,
.htaccess-field > input {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
}

.htpasswd-field-control > button {
  min-width: 88px;
  padding: 0 12px;
  border: 1px solid var(--d2-brand);
  border-radius: 8px;
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 800;
}

.htpasswd-field-control > button:hover {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft-strong);
}

.htpasswd-field-control > button:focus-visible {
  outline: 3px solid rgb(var(--d2-brand-rgb)/18%);
  outline-offset: 2px;
}

.htaccess-field > p {
  margin: 7px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.htpasswd-field-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.htpasswd-field-meta > p:first-child,
.htpasswd-byte-count {
  margin: 7px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.htpasswd-byte-count {
  text-align: right;
}

.htpasswd-byte-count.is-over-limit {
  color: #b42323;
  font-weight: 700;
}

.htpasswd-actions,
.htaccess-actions {
  margin-top: 4px;
}

.htpasswd-result-panel textarea,
.htaccess-result-panel textarea {
  min-height: 174px;
}

.htpasswd-result-meta {
  margin: 16px 0 0;
  border-top: 1px solid var(--d2-line);
}

.htpasswd-result-meta > div {
  padding: 10px 2px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--d2-line);
}

.htpasswd-result-meta dt {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.htpasswd-result-meta dd {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 800;
}

.auth-file-result-actions {
  margin-top: 17px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.auth-file-action-separator {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
  text-align: center;
}

.auth-file-result-actions > button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.auth-file-next-tool {
  width: fit-content;
  margin: 14px auto 0;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--d2-accent);
  font-size: var(--text-small);
  font-weight: 800;
}

.auth-file-next-tool:hover {
  color: var(--d2-accent-dark);
}

.email-obfuscator {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.email-protection-option {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
}

.email-protection-level {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.email-protection-level strong {
  font-size: var(--text-small);
}

.email-protection-level em {
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--d2-brand);
  color: #fff;
  font-size: var(--text-caption);
  font-style: normal;
  font-weight: 800;
}

.email-protection-copy b,
.email-protection-copy small {
  display: block;
}

.email-protection-copy b {
  font-size: var(--text-small);
}

.email-protection-copy small {
  margin-top: 5px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.65;
}

.email-protection-note {
  margin: 18px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #d68a20;
  background: #fff8eb;
  color: #6f4a19;
  font-size: var(--text-small);
  line-height: 1.7;
}

.email-obfuscator-actions {
  margin-top: 18px;
}

.email-obfuscator-preview {
  min-height: 112px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--d2-line-strong);
  border-radius: 9px;
  background: var(--d2-soft);
  text-align: center;
}

.email-obfuscator-preview > span {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.email-obfuscator-preview strong {
  margin-top: 9px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}

.email-obfuscator-preview strong.is-generated {
  color: var(--d2-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.email-obfuscator-preview small {
  margin-top: 7px;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.email-obfuscator-result-panel textarea {
  min-height: 275px;
  margin-top: 16px;
  font-size: var(--text-small);
  line-height: 1.7;
}

.email-obfuscator-result-meta dd {
  max-width: 65%;
  overflow-wrap: anywhere;
  text-align: right;
}

.email-obfuscator-copy {
  width: 100%;
  margin-top: 17px;
}

.email-obfuscator-copy:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.password-strength-layout {
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
}

.password-input-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.password-input-control > input {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--text-small);
  letter-spacing: 0.02em;
}

.password-input-control > button {
  min-width: 66px;
  padding: 0 12px;
  border: 1px solid var(--d2-brand);
  border-radius: 8px;
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 800;
}

.password-input-control > button:hover {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft-strong);
}

.password-input-control > button:focus-visible {
  outline: 3px solid rgb(var(--d2-brand-rgb)/18%);
  outline-offset: 2px;
}

.password-strength-input-meta {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.password-strength-input-meta > small {
  font-size: inherit;
}

.password-strength-input-meta > span {
  flex: 0 0 auto;
  font-weight: 700;
}

.password-strength-clear {
  margin-top: 12px;
}

.password-strength-submit {
  width: 100%;
  margin-top: 16px;
}

.password-strength-clear:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.password-strength-generator-link {
  width: 100%;
  margin: 23px 0 0;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-top: 1px solid var(--d2-line);
  color: var(--d2-accent);
  font-size: var(--text-small);
  font-weight: 800;
}

.password-strength-generator-link:hover {
  color: var(--d2-accent-dark);
}

.password-strength-empty,
.password-leak-empty {
  min-height: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--d2-muted);
  text-align: center;
}

.password-strength-empty > span,
.password-leak-empty > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--d2-accent-soft-strong);
  color: var(--d2-accent);
  font-size: var(--text-caption);
  font-weight: 900;
}

.password-strength-empty strong,
.password-leak-empty strong {
  margin-top: 18px;
  color: #4f4b45;
  font-size: var(--text-small);
}

.password-strength-empty p,
.password-leak-empty p {
  max-width: 330px;
  margin: 7px 0 0;
  font-size: var(--text-small);
  line-height: 1.7;
}

.password-leak-layout {
  grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
}

.password-leak-entry .tool-field-heading {
  align-items: center;
}

.password-leak-remove {
  margin-left: auto;
  padding: 5px 2px;
  border: 0;
  background: transparent;
  color: var(--d2-muted);
  font: inherit;
  font-size: var(--text-caption);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.password-leak-remove:hover {
  color: #b42323;
}

.password-leak-entry-error {
  margin: 7px 0 0;
  color: #b42323;
  font-size: var(--text-small);
  line-height: 1.6;
}

.password-leak-add-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.password-leak-add {
  padding: 9px 12px;
  border: 1px solid var(--d2-brand);
  border-radius: 7px;
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 800;
}

.password-leak-add:hover:not(:disabled) {
  border-color: var(--d2-brand);
  background: var(--d2-accent-soft-strong);
}

.password-leak-add:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.password-leak-add-row > span {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.password-leak-submit {
  margin-top: 17px;
}

.password-leak-clear:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.password-leak-summary {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--d2-line);
}

.password-leak-summary > span {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.password-leak-summary > strong {
  margin-top: 6px;
  display: block;
  color: var(--d2-ink);
  font-size: 21px;
  line-height: 1.45;
}

.password-leak-summary[data-state=found] > strong {
  color: #b42323;
}

.password-leak-summary[data-state=clear] > strong {
  color: var(--d2-accent-dark);
}

.password-leak-summary[data-state=error] > strong {
  color: #94610d;
}

.password-leak-summary > p {
  margin: 8px 0 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
}

.password-leak-summary-counts {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.password-leak-summary-counts > span {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.password-leak-summary-counts b {
  color: var(--d2-ink);
  font-family: Arial, sans-serif;
}

.password-leak-result-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--d2-line);
}

.password-leak-result-item-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.password-leak-result-item-heading strong {
  font-size: var(--text-small);
}

.password-leak-result-state {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--d2-soft);
  color: #4f4b45;
  font-size: var(--text-caption);
  font-weight: 800;
}

.password-leak-result-item[data-state=found] .password-leak-result-state {
  background: #fff0f0;
  color: #b42323;
}

.password-leak-result-item[data-state=clear] .password-leak-result-state {
  background: var(--d2-accent-soft);
  color: var(--d2-accent-dark);
}

.password-leak-result-item[data-state=error] .password-leak-result-state {
  background: #fff7e8;
  color: #94610d;
}

.password-leak-result-item > p {
  margin: 10px 0 0 35px;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
}

.password-leak-result-item > .password-leak-result-count {
  color: #b42323;
  font-weight: 700;
}

.password-leak-result-count strong {
  font-family: Arial, sans-serif;
}

.password-leak-result-item > button {
  margin: 12px 0 0 35px;
  padding: 8px 11px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
}

.password-leak-result-item > button:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.password-leak-source {
  margin: 17px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  line-height: 1.6;
}

.password-leak-source a {
  color: var(--d2-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.password-leak-result-actions {
  margin-top: 20px;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  border-top: 1px solid var(--d2-line);
}

.password-leak-result-actions a {
  color: var(--d2-accent);
  font-size: var(--text-small);
  font-weight: 800;
}

.password-leak-result-actions a:hover {
  color: var(--d2-accent-dark);
}

.password-strength-score > div:first-child {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
}

.password-strength-score > div:first-child > span {
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.password-strength-score > div:first-child > strong {
  font-size: 22px;
  letter-spacing: -0.03em;
}

.password-strength-score > div:first-child > b {
  color: var(--d2-muted);
  font: 800 var(--text-small)/1 Arial, sans-serif;
}

.password-strength-score > p {
  margin: 9px 0 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
}

.password-breach-summary {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--d2-line);
}

.password-breach-summary h3 {
  margin: 0;
  font-size: var(--text-body);
}

.password-strength-meter {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.password-strength-meter > span {
  height: 7px;
  border-radius: 999px;
  background: var(--d2-line);
}

.password-strength-result[data-score="0"] .password-strength-score strong,
.password-strength-result[data-score="1"] .password-strength-score strong {
  color: #c0392b;
}

.password-strength-result[data-score="0"] .password-strength-meter > .is-active,
.password-strength-result[data-score="1"] .password-strength-meter > .is-active {
  background: #d9574d;
}

.password-strength-result[data-score="2"] .password-strength-score strong {
  color: #9b650b;
}

.password-strength-result[data-score="2"] .password-strength-meter > .is-active {
  background: #d99a2b;
}

.password-strength-result[data-score="3"] .password-strength-score strong,
.password-strength-result[data-score="4"] .password-strength-score strong {
  color: #147a47;
}

.password-strength-result[data-score="3"] .password-strength-meter > .is-active,
.password-strength-result[data-score="4"] .password-strength-meter > .is-active {
  background: #26a269;
}

.password-radar-layout {
  margin-top: 28px;
  padding-top: 24px;
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.2fr);
  align-items: center;
  gap: 22px;
  border-top: 1px solid var(--d2-line);
}

.password-radar {
  width: 100%;
  max-width: 250px;
  margin-inline: auto;
  overflow: visible;
}

.password-radar-grid {
  fill: var(--d2-paper);
  stroke: var(--d2-line);
  stroke-width: 1;
}

.password-radar-axis {
  stroke: var(--d2-line);
  stroke-width: 1;
}

.password-radar-result {
  fill: rgb(var(--d2-brand-rgb)/22%);
  stroke: var(--d2-accent);
  stroke-linejoin: round;
  stroke-width: 2;
}

.password-radar-point {
  fill: var(--d2-accent);
  stroke: #fff;
  stroke-width: 1.5;
}

.password-radar-values {
  margin: 0;
}

.password-radar-values > div {
  padding: 9px 0;
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--d2-soft);
}

.password-radar-values > div:last-child {
  border-bottom: 0;
}

.password-radar-values dt {
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.password-radar-values dd {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
}

.password-radar-values dd > span {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--d2-line);
}

.password-radar-values i {
  width: 0;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--d2-brand);
  transition: width 0.2s ease;
}

.password-radar-values b {
  color: #4f4b45;
  font: 800 var(--text-small)/1 Arial, sans-serif;
  text-align: right;
}

.password-radar-note {
  margin: 13px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.password-analysis-scope,
.password-analysis-findings,
.password-crack-details {
  margin-top: 23px;
  padding-top: 20px;
  border-top: 1px solid var(--d2-line);
}

.password-analysis-scope h3,
.password-analysis-findings h3 {
  margin: 0;
  font-size: var(--text-body);
}

.password-analysis-scope ul {
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 18px;
  list-style: none;
}

.password-analysis-scope li {
  position: relative;
  padding-left: 12px;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.55;
}

.password-analysis-scope li::before {
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--d2-brand);
  content: "";
}

.password-analysis-findings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.password-analysis-findings ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.75;
}

.password-analysis-findings li + li {
  margin-top: 7px;
}

.password-crack-details summary {
  color: var(--d2-accent);
  font-size: var(--text-small);
  font-weight: 800;
  cursor: pointer;
}

.password-crack-details dl {
  margin: 15px 0 0;
  border-top: 1px solid var(--d2-line);
}

.password-crack-details dl > div {
  padding: 9px 2px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px;
  border-bottom: 1px solid var(--d2-line);
}

.password-crack-details dt {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.password-crack-details dd {
  margin: 0;
  color: var(--d2-ink);
  font-size: var(--text-small);
  font-weight: 800;
  text-align: right;
}

.password-crack-details > p {
  margin: 11px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.password-breach-copy {
  margin: 12px 0 0;
  padding-left: 70px;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.75;
}

.password-breach-copy strong {
  color: var(--d2-ink);
}

.password-breach-result {
  margin: 13px 0 0;
  padding: 11px 12px;
  border-left: 3px solid var(--d2-line-strong);
  background: var(--d2-paper);
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.7;
}

.password-breach-result[data-state=loading] {
  border-left-color: var(--d2-accent);
  background: var(--d2-accent-soft);
  color: var(--d2-accent-dark);
}

.password-breach-result[data-state=found],
.password-breach-result[data-state=error] {
  border-left-color: #c0392b;
  background: #fff3f3;
  color: #9f2f27;
}

.password-breach-result[data-state=clear] {
  border-left-color: #23945c;
  background: #effaf4;
  color: #176a43;
}

.password-breach-source {
  margin-top: 10px;
  display: block;
  color: var(--d2-muted);
  font-size: var(--text-caption);
  line-height: 1.6;
}

.password-breach-source a {
  color: var(--d2-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tool-page-ad {
  margin-bottom: 75px;
}

.tool-page-heading > span {
  padding: 5px 7px;
  display: inline-block;
  border-radius: 4px;
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  font: 800 var(--text-caption)/1 Arial, sans-serif;
  letter-spacing: 0.1em;
}

.tool-page-heading h2 {
  margin: 10px 0 7px;
  font-size: 25px;
  letter-spacing: -0.035em;
}

.tool-page-heading > p {
  margin: 0;
  color: var(--d2-muted);
  font-size: var(--text-body);
}

.tool-guide-section {
  padding-bottom: 78px;
}

.auth-overview-section,
.tool-explanation-section {
  padding-bottom: 72px;
}

.auth-overview-copy,
.tool-explanation-copy {
  max-width: 850px;
  margin-top: 24px;
  color: #4f4b45;
  font-size: var(--text-body);
  line-height: 2;
}

.auth-overview-copy p,
.tool-explanation-copy p {
  margin: 0;
}

.auth-overview-copy p + p,
.tool-explanation-copy p + p {
  margin-top: 12px;
}

.auth-overview-copy strong,
.tool-explanation-copy strong {
  color: var(--d2-ink);
}

.auth-file-role-grid {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.auth-file-role-grid article {
  padding: 22px;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-card);
}

.auth-file-role-grid article > code {
  padding: 5px 8px;
  display: inline-block;
  border-radius: 5px;
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  font: 800 var(--text-small)/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.auth-file-role-grid h3 {
  margin: 13px 0 0;
  font-size: var(--text-body);
}

.auth-file-role-grid p {
  margin: 8px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-body);
  line-height: 1.8;
}

.tool-steps {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.tool-steps li {
  position: relative;
  padding: 0 0 30px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.tool-steps li:last-child {
  padding-bottom: 0;
}

.tool-steps li:not(:last-child)::before {
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 23px;
  width: 2px;
  background: var(--d2-accent-soft-strong);
  content: "";
}

.tool-steps li > span {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--d2-brand);
  color: #fff;
  font: 800 14px/1 Arial, sans-serif;
}

.tool-steps li > div {
  padding-top: 7px;
}

.tool-steps strong {
  display: block;
  color: var(--d2-ink);
  font-size: 18px;
  line-height: 1.5;
}

.tool-steps p {
  margin: 8px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-body);
  line-height: 1.7;
}

.tool-steps p a {
  color: var(--d2-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-file-detail-section {
  padding: 76px 0;
  border-block: 1px solid var(--d2-line);
  background: var(--d2-card);
}

.auth-file-detail-grid,
.auth-directive-layout {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: start;
  gap: 30px;
}

.auth-code-label {
  margin: 0 0 8px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.auth-code-sample,
.auth-directive-sample,
.auth-multiple-users pre {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  border: 1px solid var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-paper);
  color: var(--d2-ink);
  font: 700 var(--text-small)/1.9 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre;
}

.auth-code-sample span {
  color: var(--d2-accent-dark);
}

.auth-code-sample b {
  color: var(--d2-muted);
}

.auth-code-sample em {
  color: #0d7a52;
  font-style: normal;
}

.auth-code-sample strong {
  color: #a54e00;
}

.auth-code-sample i {
  color: var(--d2-muted);
  font-style: normal;
}

.auth-code-parts,
.auth-directive-list {
  margin: 18px 0 0;
  border-top: 1px solid var(--d2-line);
}

.auth-code-parts > div,
.auth-directive-list > div {
  padding: 13px 0;
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 18px;
  border-bottom: 1px solid var(--d2-line);
}

.auth-code-parts dt,
.auth-directive-list dt {
  font-size: var(--text-small);
  font-weight: 800;
}

.auth-code-parts code,
.auth-directive-list code {
  color: var(--d2-accent-dark);
  font: 800 var(--text-small)/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.auth-code-parts dd,
.auth-directive-list dd {
  margin: 0;
  color: var(--d2-muted);
  font-size: var(--text-body);
  line-height: 1.8;
}

.auth-multiple-users {
  padding: 22px;
  border: 1px solid var(--d2-line);
  border-radius: 10px;
  background: var(--d2-soft);
}

.auth-multiple-users h3 {
  margin: 0;
  font-size: var(--text-body);
}

.auth-multiple-users > p {
  margin: 9px 0 0;
  color: #4f4b45;
  font-size: var(--text-body);
  line-height: 1.85;
}

.auth-multiple-users pre {
  margin-top: 15px;
  background: var(--d2-card);
  font-size: var(--text-small);
}

.auth-multiple-users strong {
  color: #8f3d12;
}

.auth-directive-layout {
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
}

.auth-directive-sample {
  position: sticky;
  top: 24px;
}

.auth-directive-list {
  margin-top: 0;
}

.auth-directive-list > div {
  grid-template-columns: minmax(190px, 0.75fr) minmax(0, 1.25fr);
}

.tool-info-section {
  padding: 76px 0;
  border-block: 1px solid var(--d2-line);
  background: var(--d2-card);
}

.tool-info-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 70px;
}

.tool-info-copy {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 35px;
}

.tool-info-copy section {
  padding: 20px 0;
  border-top: 1px solid var(--d2-line);
}

.tool-info-copy h3 {
  margin: 0;
  font-size: var(--text-body);
}

.tool-info-copy p {
  margin: 8px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-body);
  line-height: 1.8;
}

.tool-related-section {
  padding-top: 76px;
  padding-bottom: 65px;
}

.tool-related-grid {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tool-related-grid > a {
  min-height: 116px;
  padding: 17px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background: var(--d2-card);
}

.tool-related-grid > a:hover {
  border-color: var(--d2-brand);
}

.tool-related-grid > a > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--d2-accent-soft);
  color: var(--d2-accent);
  font-size: var(--text-small);
  font-weight: 900;
}

.tool-related-grid strong {
  font-size: var(--text-body);
}

.tool-related-grid p {
  margin: 5px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.tool-related-grid i {
  color: var(--d2-accent);
  font-style: normal;
}

.tool-related-more {
  width: fit-content;
  margin: 24px auto 0;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--d2-line);
  border-radius: 7px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font-size: var(--text-small);
  font-weight: 700;
}

.tool-related-more:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.tool-page-ad--last {
  margin-bottom: 80px;
}

.image-cropper-tool {
  align-items: start;
}

.image-cropper-selection-panel,
.image-cropper-config-layout,
.image-cropper-result-panel {
  grid-column: 1/-1;
}

.image-cropper-config-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  align-items: start;
  gap: 18px;
}

.image-cropper-preview-panel {
  min-width: 0;
  position: sticky;
  top: 24px;
}

.image-cropper-selected {
  margin-top: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
}

.image-cropper-selected > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.image-cropper-selected strong,
.image-cropper-selected small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-cropper-selected small {
  color: var(--d2-muted);
  font-size: var(--text-small);
}

.image-cropper-selected button {
  flex: 0 0 auto;
}

.image-cropper-editor-empty {
  min-height: 360px;
  padding: 28px 18px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--d2-line-strong);
  border-radius: 8px;
  background: var(--d2-card);
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
  text-align: center;
}

.image-cropper-editor {
  min-width: 0;
}

.image-cropper-viewport {
  min-height: 360px;
  max-height: min(700px, 100vh - 220px);
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--d2-line-strong);
  border-radius: 9px;
  background: #292927;
  scrollbar-gutter: stable;
}

.image-cropper-canvas-shell {
  position: relative;
  min-width: 1px;
  min-height: 1px;
  margin: auto;
  overflow: hidden;
  background-color: #fff;
  background-image: linear-gradient(45deg, #dedbd4 25%, transparent 25%), linear-gradient(-45deg, #dedbd4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dedbd4 75%), linear-gradient(-45deg, transparent 75%, #dedbd4 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  line-height: 0;
}

.image-cropper-canvas-shell > canvas {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
}

.image-cropper-dimmer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.image-cropper-dimmer path {
  fill: rgba(16, 16, 15, 0.62);
}

.image-cropper-crop-box {
  position: absolute;
  z-index: 2;
  border: 0;
  outline: 0;
  cursor: move;
  touch-action: none;
}

.image-cropper-crop-box:focus-visible {
  outline: 3px solid var(--d2-brand);
  outline-offset: 2px;
}

.image-cropper-crop-box.is-dragging {
  cursor: grabbing;
}

.image-cropper-shape-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.image-cropper-shape-grid path,
.image-cropper-shape-outline {
  vector-effect: non-scaling-stroke;
}

.image-cropper-shape-grid path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1;
}

.image-cropper-shape-outline {
  fill: none;
  stroke-linejoin: round;
}

.image-cropper-shape-outline--brand {
  stroke: var(--d2-brand);
  stroke-width: 4;
}

.image-cropper-shape-outline--white {
  stroke: #fff;
  stroke-width: 2;
}

.image-cropper-handle {
  position: absolute;
  z-index: 3;
  width: 13px;
  height: 13px;
  display: block;
  border: 2px solid var(--d2-brand);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 23, 23, 0.3);
}

.image-cropper-handle--n,
.image-cropper-handle--s {
  left: 50%;
  cursor: ns-resize;
  transform: translate(-50%, -50%);
}

.image-cropper-handle--n {
  top: 0;
}

.image-cropper-handle--s {
  top: 100%;
}

.image-cropper-handle--e,
.image-cropper-handle--w {
  top: 50%;
  cursor: ew-resize;
  transform: translate(-50%, -50%);
}

.image-cropper-handle--e {
  left: 100%;
}

.image-cropper-handle--w {
  left: 0;
}

.image-cropper-handle--ne,
.image-cropper-handle--nw,
.image-cropper-handle--se,
.image-cropper-handle--sw {
  transform: translate(-50%, -50%);
}

.image-cropper-handle--ne {
  top: 0;
  left: 100%;
  cursor: nesw-resize;
}

.image-cropper-handle--nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.image-cropper-handle--se {
  top: 100%;
  left: 100%;
  cursor: nwse-resize;
}

.image-cropper-handle--sw {
  top: 100%;
  left: 0;
  cursor: nesw-resize;
}

.image-cropper-preview-meta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.image-cropper-preview-meta > p {
  min-width: 0;
  margin: 0;
  color: #4f4b45;
  font-size: var(--text-small);
  line-height: 1.6;
}

.image-cropper-preview-meta > div {
  display: grid;
  grid-template-columns: 36px 58px 36px;
  align-items: center;
  flex: 0 0 auto;
}

.image-cropper-preview-meta button,
.image-cropper-transform-actions button,
.image-cropper-result-actions button {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
}

.image-cropper-preview-meta button:first-child {
  border-radius: 7px 0 0 7px;
}

.image-cropper-preview-meta button:last-child {
  border-radius: 0 7px 7px 0;
}

.image-cropper-preview-meta output {
  height: 38px;
  display: grid;
  place-items: center;
  border-block: 1px solid var(--d2-line-strong);
  background: var(--d2-paper);
  color: var(--d2-ink);
  font-size: var(--text-caption);
  font-weight: 800;
}

.image-cropper-preview-meta button:hover:not(:disabled),
.image-cropper-transform-actions button:hover:not(:disabled),
.image-cropper-result-actions button:hover:not(:disabled) {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.image-cropper-preview-meta button:disabled,
.image-cropper-transform-actions button:disabled,
.image-cropper-result-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.image-cropper-setting-grid,
.image-cropper-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.image-cropper-setting-grid > label,
.image-cropper-setting-grid > div,
.image-cropper-output-grid > label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-cropper-ratio-field,
.image-cropper-shape-field {
  grid-column: 1/-1;
}

.image-cropper-segmented {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.image-cropper-segmented button {
  min-width: 0;
  min-height: 66px;
  padding: 7px 4px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
  color: #4f4b45;
  font: 700 var(--text-caption)/1.2 var(--font-ja);
  cursor: pointer;
}

.image-cropper-segmented button[aria-pressed=true] {
  border-color: var(--d2-brand);
  background: var(--d2-brand);
  color: #fff;
}

.image-cropper-segmented button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid rgb(var(--d2-brand-rgb)/25%);
  outline-offset: -3px;
}

.image-cropper-shape-icon {
  width: 24px;
  height: 24px;
  display: block;
  background: currentcolor;
}

.image-cropper-shape-icon--rectangle {
  clip-path: inset(2px 0);
}

.image-cropper-shape-icon--circle {
  border-radius: 50%;
}

.image-cropper-shape-icon--rounded {
  border-radius: 6px;
}

.image-cropper-shape-icon--diamond {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.image-cropper-shape-icon--trapezoid {
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.image-cropper-shape-icon--hexagon {
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.image-cropper-shape-icon--star {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.image-cropper-shape-icon--heart {
  clip-path: polygon(50% 96%, 9% 60%, 2% 39%, 4% 24%, 15% 8%, 30% 4%, 42% 10%, 50% 22%, 58% 10%, 70% 4%, 85% 8%, 96% 24%, 98% 39%, 91% 60%);
}

.image-cropper-radius {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-cropper-radius > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.image-cropper-radius input {
  width: 100%;
}

.image-cropper-transform-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-cropper-transform-actions button {
  min-width: 0;
}

.image-cropper-transform-actions button:last-child {
  grid-column: 1/-1;
}

.image-cropper-output-grid .is-disabled {
  color: var(--d2-muted);
}

.image-cropper-quality-note {
  margin: 9px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.image-cropper-color-field > span:last-child {
  height: 42px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
}

.image-cropper-color-field input {
  width: 48px;
  height: 42px;
  padding: 4px;
  border: 0;
  border-right: 1px solid var(--d2-line);
  background: transparent;
  cursor: pointer;
}

.image-cropper-color-field output {
  padding-inline: 10px;
  font-size: var(--text-caption);
}

.image-cropper-size-toggle {
  margin-top: 16px;
}

.image-cropper-dimension-fields {
  margin-top: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 8px;
}

.image-cropper-dimension-fields > label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.image-cropper-dimension-fields > label > span:last-child {
  height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line-strong);
  border-radius: 7px;
  background: var(--d2-card);
}

.image-cropper-dimension-fields > label > span:last-child:focus-within {
  border-color: var(--d2-brand);
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/15%);
}

.image-cropper-dimension-fields input {
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border: 0;
  outline: 0;
  color: var(--d2-ink);
  font: 700 var(--text-small)/1 var(--font-ja);
}

.image-cropper-dimension-fields i {
  height: 100%;
  padding: 0 8px;
  display: flex;
  align-items: center;
  border-left: 1px solid var(--d2-line);
  background: var(--d2-paper);
  color: var(--d2-muted);
  font-size: var(--text-caption);
  font-style: normal;
}

.image-cropper-dimension-fields > span {
  padding-bottom: 11px;
  color: var(--d2-muted);
  font-weight: 800;
}

.image-cropper-settings-error {
  margin-top: 14px;
}

.image-cropper-result-panel > .tool-panel-heading {
  align-items: center;
}

.image-cropper-complete {
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--d2-soft);
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 800;
}

.image-cropper-result-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 20px;
}

.image-cropper-result-preview {
  min-height: 280px;
  margin: 0;
  padding: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--d2-line);
  border-radius: 9px;
  background-color: #fff;
  background-image: linear-gradient(45deg, #dedbd4 25%, transparent 25%), linear-gradient(-45deg, #dedbd4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dedbd4 75%), linear-gradient(-45deg, transparent 75%, #dedbd4 75%);
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.image-cropper-result-preview img {
  display: block;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.image-cropper-result-details {
  min-width: 0;
}

.image-cropper-result-name {
  display: block;
  overflow-wrap: anywhere;
  color: var(--d2-accent);
  font-size: var(--text-body);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.image-cropper-result-summary {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--d2-line);
  border-radius: 9px;
}

.image-cropper-result-summary > div {
  min-width: 0;
  padding: 11px 12px;
  border-right: 1px solid var(--d2-line);
  border-bottom: 1px solid var(--d2-line);
}

.image-cropper-result-summary > div:nth-child(2n) {
  border-right: 0;
}

.image-cropper-result-summary > div:nth-last-child(-n+2) {
  border-bottom: 0;
}

.image-cropper-result-summary dt {
  color: var(--d2-muted);
  font-size: var(--text-caption);
}

.image-cropper-result-summary dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--d2-ink);
  font-size: var(--text-small);
  font-weight: 800;
}

.image-cropper-result-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.image-cropper-result-actions > a,
.image-cropper-result-actions > button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  display: grid;
  place-items: center;
  text-align: center;
}

.image-cropper-result-actions .tool-reset-button {
  margin: 0;
}

.image-cropper-download-status {
  margin: 11px 0 0;
  text-align: left;
}

.image-cropper-download-status.is-error {
  color: #b42323;
}

@media (max-width: 900px) {
  .video-audio-inline-editor {
    grid-template-columns: minmax(0, 1fr);
  }
  .video-volume-file-editor {
    grid-template-columns: minmax(0, 1fr);
  }
  .video-audio-inline-preview-media video {
    max-height: 380px;
  }
  .password-strength-layout,
  .password-leak-layout {
    grid-template-columns: 1fr;
  }
  .video-result-layout {
    grid-template-columns: 1fr;
  }
  .image-splitter-config-layout {
    grid-template-columns: 1fr;
  }
  .image-splitter-selection-panel,
  .image-splitter-preview-panel,
  .image-splitter-settings-panel {
    grid-column: 1;
    grid-row: auto;
  }
  .image-splitter-preview-panel {
    min-height: 0;
    position: static;
  }
  .image-splitter-editor-empty {
    min-height: 220px;
  }
  .image-splitter-preview-frame > img {
    max-height: 540px;
  }
  .image-cropper-config-layout {
    grid-template-columns: 1fr;
  }
  .image-cropper-preview-panel {
    position: static;
  }
  .image-cropper-viewport {
    max-height: 620px;
  }
  .image-cropper-result-layout {
    grid-template-columns: 1fr;
  }
  .image-background-remover-workbench {
    grid-template-columns: 1fr;
  }
  .image-color-picker-workbench {
    grid-template-columns: 1fr;
  }
  .image-color-picker-result-field {
    max-height: none;
    position: static;
    overflow: visible;
  }
}
@media (max-width: 640px) {
  .video-audio-inline-editor {
    gap: 13px;
  }
  .video-audio-inline-preview-media video {
    max-height: 300px;
  }
  .video-audio-inline-step {
    padding: 12px;
  }
  .video-audio-inline-step .video-audio-current-time-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .video-volume-file-header {
    grid-template-areas: "main remove" "status remove";
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .video-volume-file-header .video-batch-file-status {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .video-volume-file-header .video-batch-remove {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .video-volume-file-editor {
    padding: 12px;
    gap: 13px;
  }
  .video-volume-settings {
    padding: 12px;
  }
  .video-volume-preview-host {
    min-height: 126px;
  }
  .video-trim-time-inputs {
    grid-template-columns: minmax(0, 1fr);
  }
  .video-trim-output-formats {
    grid-template-columns: minmax(0, 1fr);
  }
  .video-trim-range-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .tool-intro {
    padding-top: 36px;
  }
  .image-cropper-editor-empty,
  .image-cropper-viewport {
    min-height: 280px;
  }
  .image-cropper-viewport {
    max-height: 520px;
    padding: 8px;
  }
  .image-cropper-preview-meta,
  .image-cropper-selected {
    align-items: stretch;
    flex-direction: column;
  }
  .image-cropper-preview-meta > div,
  .image-cropper-selected button {
    align-self: flex-end;
  }
  .image-cropper-setting-grid,
  .image-cropper-output-grid,
  .image-cropper-transform-actions,
  .image-cropper-result-actions,
  .image-cropper-result-summary {
    grid-template-columns: 1fr;
  }
  .image-cropper-transform-actions button:last-child {
    grid-column: auto;
  }
  .image-cropper-result-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--d2-line);
  }
  .image-cropper-result-summary > div:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--d2-line);
  }
  .image-cropper-result-summary > div:last-child {
    border-bottom: 0;
  }
  .image-cropper-result-preview {
    min-height: 220px;
  }
  .tool-workspace--framed {
    width: calc(100% - 24px);
    padding: 20px 14px;
  }
  .tool-file-dropzone {
    min-height: 230px;
  }
  .tool-file-privacy {
    align-items: flex-start;
    line-height: 1.6;
  }
  .image-ocr-preview {
    grid-template-columns: 1fr;
  }
  .image-ocr-preview-frame {
    min-height: 220px;
  }
  .image-ocr-result-meta,
  .image-ocr-result-actions {
    grid-template-columns: 1fr;
  }
  .image-ocr-result-meta > div {
    border-right: 0;
    border-bottom: 1px solid var(--d2-line);
  }
  .image-ocr-result-meta > div:last-child {
    border-bottom: 0;
  }
  .image-background-remover-selected {
    align-items: stretch;
    flex-direction: column;
  }
  .image-background-remover-selected button {
    align-self: flex-start;
  }
  .image-background-remover-refinement-actions,
  .image-background-remover-settings,
  .image-background-remover-summary {
    grid-template-columns: 1fr;
  }
  .image-background-remover-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--d2-line);
  }
  .image-background-remover-summary > div:last-child {
    border-bottom: 0;
  }
  .image-background-remover-workbench figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .image-background-remover-workbench figcaption small {
    text-align: left;
  }
  .image-background-remover-canvas-frame {
    min-height: 240px;
  }
  .image-color-picker-selected {
    align-items: stretch;
    flex-direction: column;
  }
  .image-color-picker-selected > div:last-child {
    justify-content: flex-end;
  }
  .image-color-picker-workbench > .tool-field {
    padding: 15px 13px;
  }
  .image-color-picker-preview-frame {
    height: clamp(320px, 55vh, 520px);
  }
  .image-color-picker-preview-scroll {
    padding: 12px;
  }
  .color-code-overview {
    align-items: stretch;
    flex-direction: column;
  }
  .color-code-native-picker .tool-primary-button {
    width: 100%;
  }
  .color-code-format-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .color-code-channel-grid--three,
  .color-code-channel-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .color-code-presets > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .color-code-contrast-grid {
    grid-template-columns: 1fr;
  }
  .tool-layout,
  .auth-file-role-grid,
  .auth-file-detail-grid,
  .auth-directive-layout,
  .tool-info-copy,
  .tool-related-grid {
    grid-template-columns: 1fr;
  }
  .email-protection-option {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .password-radar-layout,
  .password-analysis-findings {
    grid-template-columns: 1fr;
  }
  .password-analysis-scope ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .password-strength-input-meta {
    flex-direction: column;
    gap: 3px;
  }
  .password-strength-empty,
  .password-leak-empty {
    min-height: 300px;
  }
  .tool-choice-grid--responsive {
    grid-template-columns: 1fr;
  }
  .auth-code-parts > div,
  .auth-directive-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .auth-directive-sample {
    position: static;
  }
  .discount-panel {
    min-height: 0;
  }
  .tool-panel {
    padding: 18px 16px;
  }
  .tool-field-heading,
  .htpasswd-field-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .compression-quality > .tool-field-heading {
    align-items: center;
    flex-direction: row;
  }
  .password-leak-entry > .tool-field-heading {
    align-items: center;
    flex-direction: row;
  }
  .password-leak-result-item-heading,
  .password-leak-add-row,
  .password-leak-result-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .password-leak-result-item-heading {
    align-items: flex-start;
  }
  .password-leak-add-row > span {
    align-self: flex-end;
  }
  .password-leak-result-item > p,
  .password-leak-result-item > button {
    margin-left: 0;
  }
  .compression-preset-grid {
    grid-template-columns: 1fr;
  }
  .compression-file-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 5px 10px;
  }
  .image-renamer-file-row {
    grid-template-columns: 26px 48px minmax(0, 1fr);
    gap: 7px;
  }
  .image-renamer-file-row .compression-file-thumbnail {
    width: 48px;
    height: 48px;
    grid-column: auto;
    grid-row: auto;
  }
  .image-renamer-row-actions {
    grid-column: 1/-1;
    display: flex;
    justify-content: flex-end;
  }
  .image-renamer-auto-grid,
  .image-renamer-group-settings-grid {
    grid-template-columns: 1fr;
  }
  .image-renamer-group-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .image-renamer-group-dropzone {
    min-height: 200px;
  }
  .image-renamer-order-toolbar > small {
    width: 100%;
    margin-left: 0;
  }
  .image-renamer-summary {
    grid-template-columns: 1fr;
  }
  .image-renamer-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--d2-line);
  }
  .image-renamer-summary > div:last-child {
    border-bottom: 0;
  }
  .compression-file-thumbnail {
    width: 52px;
    height: 52px;
    grid-column: 1;
    grid-row: 1/span 2;
  }
  .image-renamer-group-thumbnail {
    width: 36px;
    height: 36px;
    grid-column: auto;
    grid-row: auto;
  }
  .image-renamer-group-member {
    grid-template-columns: 25px 36px minmax(0, 1fr);
  }
  .image-renamer-group-member-actions {
    grid-column: 1/-1;
    flex-wrap: wrap;
  }
  .image-renamer-group-member-actions .image-renamer-group-transfer {
    width: auto;
    min-width: 150px;
    flex: 1;
  }
  .compression-file-main {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .compression-file-status,
  .compression-file-remove {
    grid-column: 3;
  }
  .compression-summary {
    grid-template-columns: 1fr;
  }
  .compression-summary > div {
    border-right: 0;
    border-bottom: 1px solid var(--d2-line);
  }
  .compression-summary > div:last-child {
    border-bottom: 0;
  }
  .compression-result-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .compression-result-main {
    grid-column: 1/-1;
  }
  .image-converter-result-row,
  .image-resizer-result-row,
  .image-splitter-result-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 5px 10px;
  }
  .image-converter-result-row .compression-file-thumbnail,
  .image-resizer-result-row .compression-file-thumbnail,
  .image-splitter-result-row .compression-file-thumbnail {
    grid-column: 1;
    grid-row: 1/span 2;
  }
  .image-converter-result-row .compression-result-main,
  .image-resizer-result-row .compression-result-main,
  .image-splitter-result-row .compression-result-main {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .image-converter-result-row .compression-result-badge,
  .image-converter-result-row .compression-result-download,
  .image-resizer-result-row .compression-result-badge,
  .image-resizer-result-row .compression-result-download,
  .image-splitter-result-row .compression-result-badge,
  .image-splitter-result-row .compression-result-download {
    grid-column: 3;
  }
  .image-splitter-count-grid,
  .image-splitter-output-grid,
  .image-splitter-adjustment-grid {
    grid-template-columns: 1fr;
  }
  .image-splitter-preview-frame > img {
    max-height: 420px;
  }
  .tool-progress-meta,
  .compression-result-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .tool-progress-meta > span {
    line-height: 1.6;
  }
  .compression-result-actions > button {
    width: 100%;
    min-width: 0;
  }
  .video-time-inputs {
    grid-template-columns: 1fr;
  }
  .video-source-preview,
  .video-result-preview {
    min-height: 220px;
  }
  .video-inline-preview {
    min-height: 0;
  }
  .video-batch-file-row,
  .video-batch-result-row {
    grid-template-areas: "thumbnail main" "status actions" "preview preview";
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: 8px 10px;
  }
  .video-batch-file-row.is-result-status-hidden {
    grid-template-areas: "thumbnail main" "actions actions" "preview preview";
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .video-batch-file-main,
  .video-batch-result-main {
    grid-column: auto;
  }
  .video-batch-thumbnail {
    width: 88px;
  }
  .video-batch-file-actions,
  .video-batch-result-actions {
    justify-content: flex-start;
  }
  .video-batch-file-status,
  .video-batch-result-status {
    align-self: center;
  }
  .video-batch-result-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .video-batch-result-summary > div:nth-child(2) {
    border-right: 0;
  }
  .video-batch-result-summary > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--d2-line);
  }
  .video-audio-mode-buttons {
    grid-template-columns: 1fr;
  }
  .video-audio-file-row,
  .video-audio-result-row {
    grid-template-areas: "main status" "actions actions";
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .video-audio-file-row.has-preview {
    grid-template-areas: "main status" "actions actions" "preview preview";
  }
  .video-volume-result-row {
    grid-template-areas: "main status" "actions actions";
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .video-audio-current-time-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .video-audio-current-time-actions button {
    width: 100%;
  }
  .video-bulk-download-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .video-bulk-download-actions > button {
    width: 100%;
    min-width: 0;
  }
  .video-selection-head,
  .video-selection-head > div {
    align-items: stretch;
    flex-direction: column;
  }
  .video-selection-head button {
    align-self: flex-start;
  }
  .htpasswd-byte-count {
    align-self: flex-end;
  }
  .auth-file-result-actions {
    grid-template-columns: 1fr;
  }
  .password-results-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .password-empty-result {
    min-height: 270px;
  }
  .tool-info-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .tool-page-ad {
    margin-bottom: 55px;
  }
}
.legal-page-header {
  padding-top: 48px;
  padding-bottom: 30px;
}

.legal-page-header h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.045em;
}

.legal-document {
  width: min(900px, 100% - 48px);
  margin-bottom: 80px;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--d2-line);
  border-radius: 14px;
  background: var(--d2-card);
  box-shadow: 0 14px 40px rgba(23, 23, 23, 0.05);
}

.legal-document > p:first-child {
  margin-top: 0;
}

.legal-document section {
  margin-top: 46px;
}

.legal-document h2 {
  margin: 0 0 18px;
  padding-left: 14px;
  border-left: 4px solid var(--d2-brand);
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.55;
}

.legal-document h3 {
  margin: 28px 0 10px;
  color: var(--d2-ink);
  font-size: 16px;
  line-height: 1.7;
}

.legal-document p,
.legal-document li {
  color: #4f4b45;
  font-size: var(--text-body);
  line-height: 2;
}

.legal-document p {
  margin: 16px 0 0;
}

.legal-document ol {
  margin: 0;
  padding-left: 1.75em;
}

.legal-document li {
  padding-left: 0.3em;
}

.legal-document li + li {
  margin-top: 8px;
}

.legal-document a {
  color: var(--d2-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-document a:hover {
  text-decoration-thickness: 2px;
}

.legal-document-meta {
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid var(--d2-line);
}

.legal-document-meta strong {
  color: var(--d2-ink);
}

@media (max-width: 640px) {
  .legal-page-header {
    padding-top: 36px;
    padding-bottom: 24px;
  }
  .legal-document {
    width: min(100% - 24px, 900px);
    margin-bottom: 55px;
    padding: 24px 18px;
    border-radius: 10px;
  }
  .legal-document section {
    margin-top: 38px;
  }
  .legal-document p,
  .legal-document li {
    font-size: var(--text-body);
    line-height: 1.9;
  }
}
.contact-page-header {
  padding-top: 48px;
  padding-bottom: 30px;
}

.contact-page-header h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -0.045em;
}

.contact-page-header p {
  margin: 12px 0 0;
  color: var(--d2-muted);
  line-height: 1.8;
}

.contact-panel {
  width: min(760px, 100% - 48px);
  margin-bottom: 80px;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--d2-line);
  border-radius: 14px;
  background: var(--d2-card);
  box-shadow: 0 14px 40px rgba(23, 23, 23, 0.05);
}

.contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-field + .contact-field {
  margin-top: 28px;
}

.contact-field label {
  margin-bottom: 9px;
  display: block;
  color: var(--d2-ink);
  font-size: 14px;
  font-weight: 700;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: var(--d2-ink);
  font: inherit;
  line-height: 1.7;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.contact-field textarea {
  min-height: 210px;
  resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--d2-brand);
  outline: 0;
  box-shadow: 0 0 0 3px rgb(var(--d2-brand-rgb)/14%);
}

.contact-field input[aria-invalid=true],
.contact-field textarea[aria-invalid=true] {
  border-color: #dc2626;
}

.contact-field-errors p,
.contact-form-errors p {
  margin: 0;
  color: #b42318;
  font-size: var(--text-small);
  line-height: 1.7;
}

.contact-field-errors {
  margin-top: 7px;
}

.contact-form-errors {
  margin-bottom: 24px;
  padding: 13px 15px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
}

.contact-privacy-note {
  margin: 28px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.8;
}

.contact-privacy-note a {
  color: var(--d2-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 24px;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: var(--d2-brand);
  color: #fff;
  font-weight: 800;
  transition: background 0.18s ease, transform 0.18s ease;
}

.contact-submit:hover {
  background: var(--d2-brand-hover);
}

.contact-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.contact-submit:active {
  transform: translateY(1px);
}

.contact-submit-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.contact-recaptcha-note {
  margin: 22px 0 0;
  color: var(--d2-muted);
  font-size: 12px;
  line-height: 1.8;
}

.contact-recaptcha-note a {
  color: var(--d2-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-submit-status {
  margin: 12px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-small);
  line-height: 1.7;
}

.contact-submit-status:empty {
  display: none;
}

.contact-confirm-list {
  margin: 0;
}

.contact-confirm-list > div {
  padding: 20px 0;
  border-bottom: 1px solid var(--d2-line);
}

.contact-confirm-list > div:first-child {
  padding-top: 0;
}

.contact-confirm-list dt {
  margin-bottom: 8px;
  color: var(--d2-muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.contact-confirm-list dd {
  margin: 0;
  color: var(--d2-ink);
  font-size: var(--text-body);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.contact-confirm-message {
  white-space: pre-wrap;
}

.contact-complete-panel {
  text-align: center;
}

.contact-complete-panel > span {
  width: 58px;
  height: 58px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eaf7ef;
  color: #15803d;
  font-size: 26px;
  font-weight: 800;
}

.contact-complete-panel h2 {
  margin: 0;
  font-size: 22px;
}

.contact-complete-panel p {
  margin: 12px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-body);
  line-height: 1.8;
}

@media (max-width: 640px) {
  .contact-page-header {
    padding-top: 36px;
    padding-bottom: 24px;
  }
  .contact-panel {
    width: min(100% - 24px, 760px);
    margin-bottom: 55px;
    padding: 24px 18px;
    border-radius: 10px;
  }
  .contact-field + .contact-field {
    margin-top: 24px;
  }
}
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--d2-paper);
}

.error-header-home {
  padding: 9px 13px;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.error-header-home:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent);
}

.error-main {
  flex: 1;
  display: grid;
  align-items: center;
}

.error-content {
  min-height: 520px;
  padding: 72px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(45px, 9vw, 130px);
}

.error-copy {
  max-width: 640px;
}

.error-status {
  margin: 0;
  color: var(--d2-accent);
  font: 800 var(--text-caption)/1 Arial, sans-serif;
  letter-spacing: 0.14em;
}

.error-copy h1 {
  margin: 16px 0 0;
  font-size: clamp(31px, 4.5vw, 48px);
  letter-spacing: -0.045em;
  line-height: 1.35;
}

.error-message {
  max-width: 580px;
  margin: 16px 0 0;
  color: var(--d2-muted);
  font-size: var(--text-body);
  line-height: 1.9;
}

.error-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.error-actions a {
  min-height: 43px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--d2-line);
  border-radius: 8px;
  background: var(--d2-card);
  color: #4f4b45;
  font-size: var(--text-small);
  font-weight: 700;
}

.error-actions a:first-child {
  border-color: var(--d2-brand);
  background: var(--d2-brand);
  color: #fff;
}

.error-actions a:hover {
  border-color: var(--d2-brand);
  color: var(--d2-accent-dark);
}

.error-actions a:first-child:hover {
  border-color: var(--d2-brand-hover);
  background: var(--d2-brand-hover);
  color: #fff;
}

.error-number {
  color: var(--d2-accent-soft-strong);
  font: 900 clamp(110px, 17vw, 190px)/0.8 Arial, sans-serif;
  letter-spacing: -0.08em;
  user-select: none;
}

@media (max-width: 760px) {
  .error-content {
    min-height: 460px;
    padding: 56px 0 64px;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .error-number {
    justify-self: end;
    font-size: clamp(88px, 30vw, 130px);
  }
}
@media (max-width: 480px) {
  .error-header-home {
    padding-inline: 10px;
    font-size: var(--text-small);
  }
  .error-message {
    font-size: var(--text-body);
  }
  .error-actions {
    align-items: stretch;
    flex-direction: column;
  }
}