.tool-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(16 / 16 * 1rem);
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(24 / 16 * 1rem);
}

@media (min-width: 48rem) {
  .field-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tool-textarea {
  min-height: calc(240 / 16 * 1rem);
}

.diff-output {
  margin: 0;
  overflow-x: auto;
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: calc(8 / 16 * 1rem);
  font-family: var(--font-family-mono);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.7;
}

.diff-line {
  display: flex;
  gap: calc(8 / 16 * 1rem);
  padding: 0 calc(8 / 16 * 1rem);
  white-space: pre-wrap;
  word-break: break-all;
}

.diff-line__marker {
  flex-shrink: 0;
  width: 1em;
  color: var(--color-neutral-solid-gray-536);
}

.diff-line--added {
  background-color: var(--color-primitive-green-50);
  color: var(--color-primitive-green-900);
}

.diff-line--added .diff-line__marker {
  color: var(--color-primitive-green-900);
}

.diff-line--removed {
  background-color: var(--color-primitive-red-50);
  color: var(--color-primitive-red-900);
}

.diff-line--removed .diff-line__marker {
  color: var(--color-primitive-red-900);
}

.diff-line--modified-removed .diff-line__marker,
.diff-line--modified-added .diff-line__marker {
  color: var(--color-neutral-solid-gray-536);
}

.diff-char {
  font-weight: bold;
  text-decoration-thickness: calc(2 / 16 * 1rem);
}

.diff-char--removed {
  background-color: var(--color-primitive-red-50);
  color: var(--color-primitive-red-900);
  text-decoration: line-through;
}

.diff-char--added {
  background-color: var(--color-primitive-green-50);
  color: var(--color-primitive-green-900);
  text-decoration: underline;
}

/* 世界時計 */
.clock-list {
  display: grid;
  gap: calc(16 / 16 * 1rem);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .clock-list {
    grid-template-columns: 1fr 1fr;
  }
}

.clock-card {
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: calc(12 / 16 * 1rem);
  padding: calc(16 / 16 * 1rem) calc(20 / 16 * 1rem);
}

.clock-card__city {
  margin: 0 0 calc(4 / 16 * 1rem);
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
}

.clock-card__offset {
  margin: 0 0 calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-536);
  font-size: calc(14 / 16 * 1rem);
}

.clock-card__time {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: calc(28 / 16 * 1rem);
  font-weight: bold;
  color: var(--color-key-900);
}

.clock-card__date {
  margin: calc(4 / 16 * 1rem) 0 0;
  color: var(--color-neutral-solid-gray-600);
  font-size: calc(14 / 16 * 1rem);
}

/* cowsay / sl 共通のASCIIアート出力 */
.ascii-output {
  margin: 0;
  overflow-x: auto;
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-neutral-solid-gray-50);
  padding: calc(16 / 16 * 1rem);
  font-family: var(--font-family-mono);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.3;
  white-space: pre;
}

/* sl */
.sl-track {
  position: relative;
  overflow: hidden;
  height: calc(160 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-420);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-neutral-solid-gray-50);
}

.sl-train {
  position: absolute;
  top: 50%;
  left: 0;
  margin: 0;
  white-space: pre;
  font-family: var(--font-family-mono);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.3;
  color: var(--color-neutral-solid-gray-800);
  transform: translate(100vw, -50%);
  animation: sl-run 8s linear infinite;
}

@keyframes sl-run {
  from {
    transform: translate(100vw, -50%);
  }
  to {
    transform: translate(-100%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-train {
    animation: none;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.attribution {
  margin: calc(16 / 16 * 1rem) 0 0;
  color: var(--color-neutral-solid-gray-536);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.7;
}

/* UUID生成 */
.uuid-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: calc(16 / 16 * 1rem);
  margin-bottom: calc(24 / 16 * 1rem);
}

.uuid-count-field {
  margin: 0;
  width: calc(120 / 16 * 1rem);
}